1.作用

组件通信的目的是可以让不同组件之间进行数据共享、触发事件、交互调用。

2.组件通信的方式

2.1 父组件和子组件间的传递

子组件通过props接收父组件传递来的数据，通过$emit事件将数据传递给父组件。

// 父组件
<child-component :value="parentValue" @update="handleUpdate"></child-component>

// 子组件
<template>
  <div>
 // update作为父组件的一个事件属性；$event.target.value为参数，父组件通过handleUpdate接收
    <input :value="value" @input="$emit('update', $event.target.value)">
  </div>
</template>

<script>
  export default {
    props: ['value']
  }
</script>

2.2 事件总线

通过创建一个事件总线实例，不同组件之间可以通过这个事件总线实例进行通信。一般用于Vue2中的兄弟组件间的通信。

// 在eventBus.js创建事件总线实例
import Vue from 'vue';
export const EventBus = new Vue();

// 组件A和B，通过引用该实例实现通信
// 组件A，发送数据方
EventBus.$emit('event-name', data);

// 组件B，接收数据方
EventBus.$on('event-name', (data) => {
  // handle the data
});

2.3 状态管理库(Vuex、Pinia)

它们采用集中式去管理组件的状态，并以相应的规则去保证该状态以一种可预测的方式进行改变。

// Vue2的Vuex
// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    value: ''
  },
  mutations: {
    setValue(state, payload) {
      state.value = payload;
    }
  },
  actions: {
    updateValue({commit}, payload) {
      commit('setValue', payload);
    }
  }
});

2.4 provide/inject

provide提供数据，inject接收数据，实现顶层到底层的组件通信，一般用于上下代组件间的数据传递。

// 父组件
export default {
  provide() {
    return {
      value: this.value
    }
  },
  data() {
    return {
      value: 'some value'
    }
  }
}

// 子组件
export default {
  inject: ['value'],
  created() {
    console.log(this.value);
  }
}

2.5 $refs

同样是实现父子组件的通信，通过使用$refs可以让父组件能直接访问子组件的方法或数据。

// 父组件，为子组件绑定ref
<child-component ref="childRef"></child-component>

export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.someMethod();
    }
  }
}

// 子组件
export default {
  methods: {
    someMethod() {
      console.log('child method');
    }
  }
}