Vue2组件通信方式

Vue2组件通信方式包括如下几种方式

• props、$emit（父传子props，子传父$emit）
• $emit、$on（即EventBus传值，依赖全局Vue干线）
• provide、inject（父组件通过provide提供参数，子孙组件通过inject注入参数）
• $attrs、$listeners（创建高层次组件时使用，attrs包含了父组件中没有被props声明的参数，listeners包含了父组件中不含.native修饰器的事件监听器）
• Vuex通信

1、父子传参（props和$emit）

父组件

//父组件

子组件不可直接改变父组件的值，需要定义新的变量接受父组件的传递值，将新值使用$emit返回给父组件

2、$emit和$on（全局组件通信）

利用Vue实例作为中央事件总线，来触发和监听事件。实现父子、兄弟、跨级之间的通信

//A组件

//B组件

bus.js 

import Vue from "vue"
var eventBus  =  new Vue()
export default eventBus

3、provide、inject

provide是一个对象，或者是一个返回对象的函数；inject 是一个字符串数组，或者是一个对象

provide和inject绑定不是响应的，所以A组件中值改变，B组件中是不会改变的。

//A组件

//B组件

4、$attrs、$listeners

A组件向B（子组件）使用props传递了message参数，C组件是B组件的子组件，这时候如果A向C传递参数的话就用到$attrs 监听C返回的变化就用到了listeners

//A组件

C组件可以直接触发getCData在于B在调用C的时候使用v-on绑定了$listeners属性
通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）

上面这句话的意思是：如果我们在给B传递数据时，多传递一个名字叫做messageB的参数，但是在B组件中没有去接受messageB参数，那么在C组件中也可以访问到messageB，而message是访问不到的

//B组件

//C组件

5、Vuex

Vuex是专为 Vue.js 应用程序开发的状态管理模式，收集管理应用的所有组件状态。解决了多个视图依赖同一状态和来自不同视图的行为更改同一个状态的问题。

Vuex包含5大模块（state，getters，mutations，actions，modules），后边会有介绍Vuex的文章。

Vuex通信类似于EventBus。

创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {  //声明state状态树
   message: {
      title: '',
      content: '',
    },
   messageB: ''
  },
  mutations: {    //mutation中提交需要改变的方法
    sendMessage(state, obj) {
      state.message = {
        title: obj.title,
        content: obj.content,
      }
    },
    sendBMessage(state, val){
        state.messageB = val.BMsg
    }
  }
})

在组件A中获取Vuex的数据，同理可在B组件中获取。如果通过A要改变B的数据可通过单独提供给B的方法修改

//A组件