vue中组件通信的几种方式

       我们知道，vue中的一个大页面是由多个子组件组成，组件之间的关系往往错综复杂，因此我们了解组件的通信方式成为vue中的重中之重。这篇文章就来总结一下vue项目中的几种通信方式。

一. 父子组件通信

1.props/$emit

 父组件通过props向子组件传递数据，子组件通过$emit触发父组件的方法，从而实现子到父的通信

// 子组件Child.vue

 2.$parent/$children（不推荐使用）

通过this.$parent可以拿到当前组件的父组件(如果有的话)，通过this.$children可以拿到它的所有子组件(如果有的话)，因为this.$children是一个数组，如果要拿到它特定的子组件，需要知道对应子组件所在的位置的下标。

 没有特殊情况一般不必使用，这里仅作了解。

二. 非父子组件通信

 1.provide/inject

provide/inject是vue 2.2.0 新出的api,主要用于父、子、孙及所有后代之间的通信。通过provide属性在父组件中提供指定属性，在需要的子孙组件(不论组件嵌套有多深)中通过inject注入所需属性。

 举个例子

// Father.vue

// Child.vue

2.ref/refs

ref: 如果在普通DOM元素上使用，则指向dom元素本身。如果用在组件元素上，则指向这个组件的实例。可以通过this.$refs.ref属性名使用组件的data、methods等。

 使用场景：一般可用于一些弹窗的显示和隐藏。

// 子组件 A.vue

// 父组件 app.vue

3.eventBus

eventBus俗称叫事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

主要分为以下四步

• 初始化eventBus,简单来说就是执行new Vue()
• 在所需要的组件中导入eventBus，通过eventBus.$emit() 触发事件。
• 在需要接受事件的组件中通过eventBus.$on()接受事件
• eventBus.$off()来注销事件

// 创建event-bus
// event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

// 在所需组件中$emit()触发事件
// addtionNum.vue 中触发事件

// 通过$on接收事件
// showNum.vue 中接收事件

// 通过$off移除事件
import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

eventBus一般用于逻辑比较简单的系统，逻辑过于复杂，eventBus的维护会十分困难。这时候一般推荐使用vuex代替eventBus.

4.vuex

vuex是一种状态管理模式，它保存着组件的公用的状态，并且以相应的规则保证状态变化。vuex的核心就是一个store，它相当于是一个容器，里面包含有state,action,mutation,getter,modules等核心

• state：用于数据的存储，是store中的唯一数据源
• getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
• mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件
• actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
• modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

以下是一个简单的vuex实例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

//可以通过以下方式来读取state
console.log(store.state.count)

store.commit("commit")