Vue 组件间通信的六种方式

背景介绍

在Vue中，组件是构建用户界面的基本单位。在开发过程中，我们难免会遇到多个组件需要相互通信的情况，用来处理这种情况的机制就是Vue组件通信。这里将介绍Vue组件通信的六种方式，并提供代码示例和使用说明。

六种通信方式

1. 父子组件通信（props / $emit）

// 父组件
<params>
  <child :message="hello"></child>
/params>

// 子组件
<params>
  props: ['message']
/params>
<template>
  <p>{{ message }}</p>
  <button @click="$emit('change')">change</button>
</template>

props用来在父组件传递数据给子组件，子组件通过props选项接收数据，并作为自己的属性存储。这种方式是最常用的方式之一。

$emit用来在子组件传递事件给父组件，子组件通过$emit方法触发自定义事件，父组件通过在子组件上绑定@事件名来监听子组件触发的事件。

2. 兄弟组件通信 (event bus)

在Vue中，可以使用$emit和$on来分别触发和监听一个全局事件。event bus是一种通过事件来传递消息的方式，使用它可以在多个组件之间传递数据。

// main.js
Vue.prototype.$bus = new Vue()

// Sender.vue
this.$bus.emit('eventName', data)

// Receiver.vue
this.$bus.on('eventName', (data) => {
  // handle data
})

3. 父子组件通信（$ref）

// 父组件
<emp>
  <child ref="child"></child>
  <button @click="change">change</button>
</template>

// 子组件
methods: {
  change () {
    this.$refs.child.xxx()
  }
}

$ref可以让父组件在子组件上注册ref，并通过$refs来访问子组件上的属性和方法，从而达到父组件修改子组件状态的目的。

4. 父子组件通信（$parent / $children）

// 父组件
<template>
  <p>{{ child.message }}</p>
</template>

// 子组件
created () {
  console.log(this.$parent)
}

可以通过$parent访问父级组件，也可以通过$children访问当前组件的所有直接子组件。

5. 祖先组件与后代组件通信（provide / inject）

// 祖先组件
provide () {
  return {
    method: this.method
  }
}

// 后代组件
inject: ['method']

provide可以向后代组件提供数据和方法，通过inject选项可以注入父级provide提供的数据和方法。

6. 跨组件通信（Vuex）

在较复杂的应用中，我们通常需要一个集中式数据管理，Vuex就是为了解决这个问题而生的。它采用了集中式存储管理应用的各种组件之间共享的数据，以及定义和管理这些数据的规则。

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

// 组件中的使用
this.$store.commit('increment')

总结

以上六种方式都是Vue中常用的组件通信方式，可以根据不同的场景选择不同的方式。实际开发中，这些通信方式可以组合使用，例如组件间通过Vuex进行跨组件状态管理，同时父子组件通过props / $emit的方式通信。在使用时需要注意避免过度使用，并注意通信的方向和数据类型的一致性。