Vue中组件间的通讯方式

1、$emit/props（父子组件）

在父组件中，引用子组件，并将子组件需要的name属性传递过去。

<Son :name="name"></Son>

在子组件中通过props进行接收。父组件传过来的值是不允许修改的，想要修改必须通知父组件，让父组件来改

props: ['name']

在子组件中通过$emit方法，来触发一个名为‘send’的方法，并将参数传递过去。

send() {
  this.$emit('send', '收到名字');
}

在父组件中将‘send’绑定一个方法get

<Son :name="name" @send="get"></Son>

通过get方法将父组件中传递过来的数据得到。

get(name) {
  this.sonName = name;
}

2、ref与 $parent / $children（父子组件）

在父组件中通过ref来获取子组件，并可以获取子组件中的属性。

<Son ref="son" :name="name" @send="get"></Son>

getChild() {
  console.log(this.$refs.son.age);
}

在父组件中通过$children来访问子组件，并可以获取子组件中的属性。

getChild() {
  console.log(this.$children[0].age);
}

在子组件中通过$parent来访问父组件中的属性和方法。

send() {
  this.$parent.name = '李四';
  console.log(this.$parent);
  // this.$emit('send', '收到名字');
}

3、事件总线EventBus（父子、兄弟、隔代组件）

利用vue的 $on 和 $emit 方法，完成事件的收集与触发。首先新建一个Vue实例。

// MyEven.js
import Vue from 'vue';
const vm = new Vue();
export default vm;

在需要收到信息的组件中，通过$on方法完成事件的收集

MyEvent.$on('send', (arg)=>{
  console.log(arg);
})

在需要触发事件的组件中，通过$emit方法来完成事件的触发。

MyEvent.$emit('send', '收到名字');

4、$attrs / $listeners （隔代组件）

$attrs可以在子组件中获取父作用域中，不被prop所识别的属性和方法（class/style除外）

console.log(this.$attrs);

$listeners可以在子组件中获取父作用域中，所有通过v-on绑定的事件。

// 父组件
<Son ref="son" :name="name" @send="get"></Son>

// 子组件
this.$listeners.send(12341234) // 会触发父组件中的get方法

之所以主要用于隔代组件是因为可以通过

v-bind='$attrs'
v-on='$listeners'

将属性和方法传递到孙子组件中。

5、provide/inject（隔代组件）

在父组件中提供属性。

provide() {
  return {
    message: this.name
  }
},

在孙子组件中完成依赖注入

inject: ['message'],

6、Vuex （任何组件）

最后是强大的Vuex，可以在任何组件间进行通信。

const store = new Vuex.Store({
    // 数据存放
    state: {
        age: 10
    },
    // 修改数据的方法
    mutations: {
        modifyAge(state, payload) {
            state.age = payload.age;
        }
    },
    // 全局的计算属性
    getters: {
        tenYearsOld(state){
            return state.age + 10;
        }
    },
    //处理所有异步逻辑
    actions: {
    }
});