Vue组件间通信

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

1、父子组件通信

二、公共事件总线eventBus

三、vuex状态管理

---

1、父子组件通信

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

<template>   
    <ul>  
        <div>我是父组件</div>
        <list-item 
          :data-list="dataList"
          @click="handleItemClick"
        >
        </list-item>
    </ul>
</template>
<script>
   import ListItem from './listItem'
    export default {
        name: 'Ul',
        data() {
            return {
                dataList: []
            }
        },
         methods: {
            handleClick(item) {
                console.log('emit click item :' + item);               
            }
        },
        components: {
            ListItem
        }
    }
</script>

<template>
    <div >
      <div>我是数组列表子元素</div>
      <ul>
          <li v-for="(item, i) in list" :key="i" @click="handleClick">
              <input type="checkbox"> {{item.name}}
          </li>
      </ul>
    </div>  
</template> 
<script>
  export default {
    data() {
     return {
        name: 'list-item',
        list: []
     }
    },
    props: {
      dataList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    methods: {
      handleClick(item) {
        console.log('click item :' + item);
        this.$$emit('handleItemClick', item)
      }
    }
  }
</script>

二、公共事件总线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开发中的中央事件总线