【Vue】组件通信-eventbus（总线）简单入门

基本

    vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。如果两个页面没有任何引入和被引入关系，该如何通信了，一个是用vuex，另一种方法就是用eventbus。

    首先看一下用到的实例方法和官方解释（摘自官方）：

vm.$emit( eventName, […args] )

• 参数：

  • {string} eventName
  • [...args]

  触发当前实例上的事件。附加参数都会传给监听器回调

vm.$on( event, callback )

• 参数：

  • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
  • {Function} callback

• 用法：

  监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

    简单来说就是用实例上的$on监听同一个实例上的$emit对应的自定义事件，其中$on第一个参数event表示自定义事件的名字，第二参数为回调函数，可接收$emit中自定义事件的参数。

 

示例：

需求：实现当点击组件A按钮时候，组件B的值变更为组件A中data的值

（1）创建bus实例

const bus = new Vue()

（2）创建组件A，B

 Vue.component('componentA', {
            data: function () {
                return {
                    info: '来自组件A的文字'                }
            },
            template: `
            <div>
                <button :value="num" @click="handle">按钮</button>
            </div>
            `,
            methods: {
                handle() {
                   
                }
            }
        })

 Vue.component('componentB', {
            data: function () {
                return {
                    info: '组件B自身文字'
                }
            },
            template: `
            <div>
                <h1>{{info}}</h1>
            </div>
            `
        })

（3）创建app并使用组件A,B

const vm = new Vue({
            el: '#app',
        })

<div id="app">
        <component-a></component-a>
        <component-b></component-b>
</div>

此时会看到的是：

 

（4）为组件A的按钮添加handle方法，handle方法内容为通过第一步的bus实例的$emit触发一个名为testevent的自定义事件，同时传递一个参数为组件A的info

 Vue.component('componentA', {
            data: function () {
                return {
                    info: '来自组件A的文字'                }
            },
            template: `
            <div>
                <button :value="num" @click="handle">按钮</button>
            </div>
            `,
            methods: {
                handle() {
                    //这里！！！！！！！！
                    bus.$emit('testevent', this.num)
                }
            }
        })

（5）此时如果点击了组件A，则会触发handle方法，从而触发bus实例中的$emit方法，最后触发testevent自定义事件同时附带A的info，为了能够监听到此次自定义事件的发生，就可以用到开头介绍的$on方法，可以在组件B的生命周期钩子中挂载这个方法，相当于订阅了testevent这个自定义事件，每当自定义事件testevent触发时都可以监听到并且调用回调函数处理业务逻辑

 Vue.component('componentB', {
            data: function () {
                return {
                    info: '组件B自身文字'
                }
            },
            mounted() {
                bus.$on('testevent', (val) => {
                    this.info= val
                })
            },
            template: `
            <div>
                <h1>{{info}}</h1>
            </div>
            `
        })

（6）最后点击组件A的按钮就可看到如下内容：