vue3使用provide&inject实现祖孙组件通讯

**Vue3 中的 Provide & Inject 实现祖孙组件通讯**

在 Vue2.x 中，通过 `$root` 或者 `$parent` 来访问父组件或根组件是很常见的做法。但是在 Vue3 中，这种方式已经被弃用了。相反，我们可以使用 `provide` 和 `inject` 这两个新特性来实现祖孙组件之间的通讯。

### Provide`provide` 是一个用于向下传递数据的函数，它接受一个对象作为参数，返回一个包含该对象的上下文。这意味着在父组件中，我们可以使用 `provide` 来向子组件传递数据。

javascript// 父组件<template>
 <div>
 <!-- 子组件 -->
 <Child />
 </div>
</template>

<script>
import Child from './Child.vue'

export default {
 components: { Child },
 setup() {
 const data = ref('Hello, world!')

 // 使用 provide 向子组件传递数据 return {
 data,
 provide: {
 msg: data,
 },
 }
 },
}
</script>

在上面的例子中，我们使用 `provide` 来向子组件传递一个名为 `msg` 的属性，其值是 `data`。

### Inject`inject` 是用于从父组件中获取数据的函数，它接受一个字符串作为参数，返回该字符串对应的值。我们可以在子组件中使用 `inject` 来获取父组件传递过来的数据。

javascript// 子组件<template>
 <div>
 {{ msg }}
 </div>
</template>

<script>
export default {
 setup() {
 // 使用 inject 从父组件获取数据 const msg = inject('msg')

 return {
 msg,
 }
 },
}
</script>

在上面的例子中，我们使用 `inject` 来从父组件中获取一个名为 `msg` 的属性，其值是 `data`。

### 实现祖孙组件通讯现在我们已经了解了 `provide` 和 `inject` 的基本用法，我们可以通过以下步骤来实现祖孙组件之间的通讯：

1. 在祖父组件中使用 `provide` 来向子组件传递数据。
2. 在子组件中使用 `inject` 来从祖父组件获取数据。
3. 在孙子组件中使用 `inject` 来从子组件获取数据。

javascript// 祖父组件<template>
 <div>
 <!-- 子组件 -->
 <Child />
 </div>
</template>

<script>
import Child from './Child.vue'

export default {
 components: { Child },
 setup() {
 const data = ref('Hello, world!')

 // 使用 provide 向子组件传递数据 return {
 data,
 provide: {
 msg: data,
 },
 }
 },
}
</script>

javascript// 子组件<template>
 <div>
 <!-- 孙子组件 -->
 <GrandChild />
 </div>
</template>

<script>
import GrandChild from './GrandChild.vue'

export default {
 components: { GrandChild },
 setup() {
 // 使用 inject 从祖父组件获取数据 const msg = inject('msg')

 return {
 msg,
 provide: {
 childMsg: msg,
 },
 }
 },
}
</script>

javascript// 孙子组件<template>
 <div>
 {{ childMsg }}
 </div>
</template>

<script>
export default {
 setup() {
 // 使用 inject 从子组件获取数据 const childMsg = inject('childMsg')

 return {
 childMsg,
 }
 },
}
</script>

在上面的例子中，我们实现了祖孙组件之间的通讯。祖父组件向子组件传递了一个名为 `msg` 的属性，其值是 `data`。子组件向孙子组件传递了一个名为 `childMsg` 的属性，其值是 `msg`。孙子组件从子组件中获取了一个名为 `childMsg` 的属性，其值是 `data`。

### 总结在本文中，我们学习了 Vue3 中的 `provide` 和 `inject` 这两个新特性，通过这些特性我们可以实现祖孙组件之间的通讯。我们通过实例代码来演示了如何使用 `provide` 和 `inject` 来传递数据，并且在子组件中使用 `inject` 来从父组件获取数据。在孙子组件中，我们使用 `inject` 来从子组件获取数据，实现了祖孙组件之间的通讯。