Vue知识点总结(13)——组件通信-平行传值（超级详细）

news/2024/7/19 12:50:28 标签: vue, js, html, 前端

hello，同学们，之前我们已经学习了组件通信中的父传子和子传父。
今天我们要学习的内容是组件通信中的平行传值。
平行传值是什么意思呢？
就比如你和哥哥、弟弟、姐姐、妹妹的关系，就是平辈的关系。
之前我们使用组件的时候，通过使用和被使用，会产生一个父子关系。
平行组件不存在这个关系。

html"><div id="app">
    <App></App>
</div>

<script>
    const bus = new Vue();
    Vue.component('A',{
        data(){
            return{

            }
        },
        template:`
            <button @click='handleClick'>加入购物车</button>
        `,
        methods:{
            handleClick(){
                bus.$emit('add',1);
            }
        }
    });
    Vue.component('B',{
        data(){
            return{
                count:0
            }
        },
        template:`
            <div>
                {{count}}
            </div>
        `,
        methods:{

        },
        created () {
            bus.$on('add',(n) => {
                this.count += n;
            })
        }
    })
    const App = {
        data () {
            return {
                
            }
        },
        template:`
            <div>
                <A></A>
                <B></B>
            </div>
        `,
        methods: {
            
        }
    }
    new Vue({
        el:'#app',
        components: {
            App
        }
    });
</script>

我们照常写了一个全局组件A和一个全局组件B。

全局组件A中，有一个按钮，伴随一个点击事件，用于传递数据。
全局组件B中，只有一个div展示count变量，count就是接收A组件传过来的值。

平行组件传值的原理，就是找一个公共中间量。

就像我们之前写A、B两个变量交换值一样，我们通常都会找一个公共的空变量C。把A的值给C，然后把B的值给A，最后把C的值给B。

平行组件的传值和这个思路一样，平行组件间是没有办法直接传值的，必须找一个公共的中间量，就像公共汽车一样。

我们在示例中顶部写的const bus = new Vue();

A组件中，用户点击按钮后，通过bus.$emit()传值，第一个参数是我们自己定义的一个名字，第二个参数是要传递的值。
B组件中，我们调用了created这个生命周期函数，生命周期这个东西我们之后还会开一篇再讲这个东西，这里我们只需要知道created就是在实例刚刚被创建的时候调用，还没有进行任何的挂载。created中，我们调用**bus.＄on()**接收值，第一个参数依然是我们之前自己在A组件中定义的那个名字，第二个参数是个函数，接收其它组件传过来的值。

其实还是很简单的，我们就是通过bus这个中间量，起到一个传递的作用。
然后一个$emit，一个＄on，传递和接收。

其实到这里我们就已经完成了平行组件间的传值，然后我们为了方便展示，写了一个局部组件App，使用A、B这两个全局组件。然后在我们创建的Vue实例中，直接挂载App这个局部组件即可。

在这里插入图片描述