Vue中非父子组件传值

Vue中非父子组件传值

vue官网指出，可以使用一个空vue实例作为事件中央线，也就是说非父子组件之间的通信必须有公共的实例（可以是空的），才能使用$emit获取$on的数据参数，实现组件通信。

方法一

在入口文件main.js中，在vue原型上添加一个bus对象

Vue.prototype.bus = new Vue() // 实现全局的事件总线对象

在组件A中，触发事件

this.bus.$emit('updata', data)  // data就是触发updata事件要带走的数据

在组件B中，监听事件

this.bus.$on('updata', function(data) {
    console.log(data)  // data就是触发updata事件带过来的数据
})

方法二

创建公共实例文件eventBus.js，作为公共数控中央总线。

import Vue from 'vue'
export default new Vue()

在组件A中，触发事件

import eventBus from '../eventBus'
export default {
    name: 'a',
    data () {
        return {
            msg: '我来自a.vue组件!'
        }
    },
    methods: {
        // 定义send方法，并将msg通过msg传给b组件
        send () {
            eventBus.$emit('msg', this.msg)
        }
    }
}

在组件B中，监听事件

import eventBus from '../eventBus'
export default {
    name: 'b'
    data () {
        return {
        }
    },
    mounted () {
        // 监听a组件的txt事件
        eventBus.$on('msg', function(val){
            console.log(val)
        })
    }
}

这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。