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

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

<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这个局部组件即可。

点击加入购物车之后，展示的count值按照预期一样，完成了+1操作。

到现在为止我们已经学习了组件通信中的父传子、子传父和平行传值。这些都是非常常用的通信方式，下期我们还用讲解一些其它的组件通信方式，虽然不常用，但是不好说在哪儿能用到，比如面试的时候，所以还是多了解一些的好。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！