Vue组件间通信

今天总结下Vue组件建的通信，主要讲父子props、公共事件总线eventBus、vuex状态管理三种方式。

1、父子组件通信

二、公共事件总线eventBus

三、vuex状态管理

---

1、父子组件通信

父子组件通信一般通过props、emit方式即可实现。直接见代码，

二、公共事件总线eventBus

    公共事件总线eventBus实质上就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它能有效的解决兄弟组件之间通信。

定义eventBus：

// main.js
import Vue from 'vue';
window.eventBus = new Vue();   // 注册全局事件对象
// 也可以修改Vue的原型链
Vue.prototype.$event = new Vue();

A组件中触发事件传值：

// moduleA.vue
methods: {
    sendData () {
        // 通过修改Vue原型链的方式注册
        this.$event.$emit('dataFromA', this.dataA);
        // 直接注册在window上
        // moduleEvent.$emit('dataFromA', this.dataA);      
    }
}

B组件接受事件：

methods: {
    getData () {
        // 通过修改Vue原型链的方式注册
        this.$event.$on('dataFromA',  function (data) {
            // handle data code
            // 回调函数的参数data即为组件A传递的值
        });
        // 直接注册在window上
        // moduleEvent.$emit('dataFromA',  function (data) {
            // handle data code
            // 回调函数的参数data即为组件A传递的值
        // });      
    }
}

公共事件总线eventBus方式不受组件间关系束缚，但此方案在当需要管理大量数据的时候，存在维护起来不方便，不够清晰等问题。

三、vuex状态管理

当我们需要在项目中管理多个数据状态的时候，vuex是最优的方案。vuex通过唯一的store 容器来管理应用组件的状态state。

状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

vuex管理组件状态通信具体过程见： vuex官网

参照资料： Vue开发中的中央事件总线