Vue2组件通信一网打尽：9种方案玩转兄弟、父子和祖孙组件

2023-04-04 15:16:35

Vue 2 组件通信：9 大方案，轻松搞定所有场景

引言：
在 Vue.js 的组件化开发中，组件之间的通信至关重要。本文将深入浅出地介绍 Vue 2 中的 9 种组件通信方案，涵盖父子组件、兄弟组件和祖孙组件的通信难题。了解这些方案，你将能够轻松驾驭组件化开发，提升开发效率和代码质量。

常见场景

在介绍具体方案之前，我们先来了解组件通信的常见场景：

父子组件通信： 父组件向子组件传递数据，子组件向父组件传递数据。
兄弟组件通信： 同一个父组件下的兄弟组件之间进行数据传递。
祖孙组件通信： 祖先组件向孙子组件传递数据，孙子组件向祖先组件传递数据。

9 种方案解析

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

props 是父组件向子组件传递数据的机制，$emit 事件用于子组件向父组件传递数据。这是父子组件通信最常见的方案。

// 父组件
<template>
  <child-component :data="data" @update="handleUpdate"></child-component>
</template>

<script>
export default {
  data() {
    return {
      data: '传递给子组件的数据'
    }
  },
  methods: {
    handleUpdate(updatedData) {
      // 接收到子组件传递的数据
    }
  }
}
</script>

// 子组件
<template>
  <div>
    {{ data }}
    <button @click="updateData">更新</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    updateData() {
      // 更新数据并触发 $emit 事件
      this.$emit('update', '更新后的数据')
    }
  }
}
</script>

2. parent/children：父子组件通信

$parent 和 $children 用于访问父子组件的实例对象。父组件可以通过 $children 访问其所有子组件的实例，子组件可以通过 $parent 访问其父组件的实例。

// 子组件
<template>
  <div>
    {{ $parent.data }}
    <button @click="updateData">更新</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateData() {
      // 更新父组件数据
      this.$parent.data = '更新后的数据'
    }
  }
}
</script>

3. provide/inject：祖孙组件通信

provide 和 inject 用于祖孙组件通信。祖先组件通过 provide 选项提供数据，孙子组件通过 inject 选项注入数据。

// 祖先组件
<template>
  <grandchild-component>
    <provide>
      <data>祖先组件提供的数据</data>
    </provide>
  </grandchild-component>
</template>

// 孙子组件
<template>
  <div>
    {{ data }}
    <button @click="updateData">更新</button>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  methods: {
    updateData() {
      // 更新数据
      this.data = '更新后的数据'
    }
  }
}
</script>

4. ref/$ref：获取组件实例或 DOM 元素

ref 和 $ref 用于获取组件的 DOM 元素或组件实例。父组件可以通过 ref 属性获取子组件的 DOM 元素或组件实例，子组件可以通过 $ref 属性获取父组件的 DOM 元素或组件实例。

// 父组件
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    // 获取子组件的 DOM 元素
    console.log(this.$refs.child.$el)
  }
}
</script>

// 子组件
<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取父组件的 DOM 元素
    console.log(this.$refs.parent.$el)
  }
}
</script>

5. EventBus：全局事件通信

EventBus 是一个全局的事件通信机制。组件可以通过发布和订阅事件来实现通信。

// EventBus
export const eventBus = new Vue()

// 发布事件
eventBus.$emit('update-data', '更新后的数据')

// 订阅事件
eventBus.$on('update-data', (data) => {
  // 处理数据
})

6. Vuex：状态管理

Vuex 是一个状态管理库，它可以帮助我们在组件之间共享状态。组件可以通过 Vuex 的 getters 和 mutations 来获取和修改状态。

// store.js
export const store = new Vuex.Store({
  state: {
    data: '共享状态'
  },
  getters: {
    getData(state) {
      return state.data
    }
  },
  mutations: {
    setData(state, newData) {
      state.data = newData
    }
  }
})

// 组件
<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
export default {
  computed: {
    data() {
      return this.$store.getters.getData
    }
  },
  methods: {
    updateData() {
      this.$store.commit('setData', '更新后的数据')
    }
  }
}
</script>

7. Composition API：provide/inject 的替代方案

Composition API 是 Vue 3 中引入的新特性，它提供了 provide 和 inject 的替代方案。

// 祖先组件
<template>
  <grandchild-component>
    <script setup>
      provide('data', '祖先组件提供的数据')
    </script>
  </grandchild-component>
</template>

// 孙子组件
<template>
  <div>
    {{ data }}
    <button @click="updateData">更新</button>
  </div>
</template>

<script setup>
  const data = inject('data')
  const updateData = () => {
    // 更新数据
    data.value = '更新后的数据'
  }
</script>

8. Options API：传统组件通信方案

Options API 是 Vue 2 中传统的组件编写方式。它提供了许多选项，包括 props、data、methods 和 watch，这些选项可以帮助我们实现组件通信。

9. 自定义事件：灵活的通信方案

我们可以使用自定义事件来实现组件之间的通信。自定义事件是一种 JavaScript 事件，它可以通过 dispatchEvent() 方法触发，也可以通过 addEventListener() 方法监听。

// 发射自定义事件
this.$el.dispatchEvent(new CustomEvent('update-data', {
  detail: '更新后的数据'
}))

// 监听自定义事件
window.addEventListener('update-data', (e) => {
  // 处理数据
})

结论：

掌握了这 9 种组件通信方案，你将能够轻松驾驭 Vue 2 中的各种组件通信难题。根据具体的场景选择合适的方案，可以大大提升开发效率和代码可维护性。不断探索和实践，你将成为 Vue.js 组件化开发的专家。

常见问题解答：

哪种方案最适合父子组件通信？
- props 和 $emit 是最常见的父子组件通信方案。
如何实现祖孙组件通信？
- 可以使用 provide 和 inject 方案或 Composition API 中的 provide 和 inject 替代方案。
Vuex 主要用于解决什么问题？
- Vuex 主要用于管理组件之间共享的状态。
Composition API 是什么？
- Composition API 是 Vue 3 中引入的新特性，它提供了一种函数式的方式编写组件。
自定义事件的优势是什么？
- 自定义事件可以灵活地实现组件之间的通信，不受 Vue 特定的限制。