非父子组件通讯-中央事件总线

时间 2019-11-17

标签父子组件通讯中央事件总线栏目主板繁體版

原文原文链接

写在前面

上一篇讲了父子组件的通讯，那么非父子组件间如何通讯呢？在vue.js 2.x中，用一个空的Vue实例做为中央事件总线与两个跨级组件进行通讯，在通讯的过程当中两个跨级组件互不联系。vue

文章的开始

前面大概介绍了中央事件总线的过程，具体如何进行看个栗子。bash

<body>
    <div id="app">
        {{ message }}
        <component-a></component-a>
    </div>
    <script>
        var bus = new Vue();
        Vue.component('component-a',{
            template: '<button @click="handleEvent">传递-事件</button>',
            methods: {
                handleEvent:function () {
                    bus.$emit('on-message','来自组件commponent-a的内容');
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            },
            mounted: function (){
                var _this = this;
                //在实例初始化时，监听来自bus实例的事件
                bus.$on('on-message',function (msg) {
                    _this.message = msg;
                }) ;
            }
        })
    </script>
</body>
复制代码

结果如图所示：app

点击传递事件按钮，显示‘来自组件commponent-a的内容’

1.经过组件建立了一个“传递事件”的按钮，点击按钮，触发点击事件，执行handleEvent函数，在handleEvent函数里面，经过bus.$emit将on-message传递到bus这个实例上面。

2.关于mounted这个钩子，咱们知道el挂载到实例后调用，通常业务逻辑会从这里开始。函数

3.当el挂载app后，在mounted的函数里面监听来自bus的on-message事件，因此当on-message事件传到bus实例上后，就会执行匿名函数function，给app中data里的message赋值。（msg）{}。页面中再经过插值表达式将数据message显示出来。this

文章的结束

在vue.js 2.x中，用一个空的Vue实例bus做为中央事件总线，bus实例也能够扩展，好比添加methods，data，computed等选项。固然还有经过父链和子组件索引也能够实现组件间的通讯。spa