Vue3 理解 provide / inject 的用法、作用

作用

provide / inject 的作用很简单，就是避免重复声明 props，传统的父传子数据需要用到 props 属性，问题是如果要将父组件的数据传递到 N 层组件，那么就要传递 N 次 props 属性，非常繁琐，而有了 provide / inject 神器，只需一次就够了。

案例

假设父组件是 A.vue ，子组件是 B.vue，子子组件是C.vue
如果 C.vue 想要 A.vue 的数据，我们只需在 A.vue 使用 provide
然后 C.vue 使用 inject 就可以啦。

// A.vue
setup() {
    
    
 const info = reactive({
    
    
    name: 'Tony',
    age: 99
  })
  provide('info', info) // 导出
 }
// C.vue
setup() {
    
    
  const info = inject('info') // 接受
}

怎么样，使用方式是不是很简单，我们来看看完整代码和效果图：

父组件 A.vue

<template>
    <div class="child">
     父组件访问到的数据是：<span>{
    
    {
    
     info.name }}  {
    
    {
    
     info.age }}</span>
    </div>
    <button @click="updateInfo">父组件点击更新数据</button>
  <child />
</template>

<script>
import child from './child.vue'
import {
    
     provide, reactive } from 'vue'
export default {
    
    
  components: {
    
    
    child
  },
	setup() {
    
    
    const info = reactive({
    
    
      name: 'Tony',
      age: 99
    })
    provide('info', info)
    
    // 父组件更新数据
    const updateInfo = () => {
    
    
      info.name = 'Jack'
      info.age = 8000
    }
   
    return {
    
    
      info,
      updateInfo
    }
  }
}
</script>

子组件 C.vue

<template>
    <div class="child">
      子组件访问到的数据是：<span>{
    
    {
    
     info.name}}  {
    
    {
    
     info.age }}</span>
    </div>
    <button @click="updateInfo">子组件点击更新父组件数据</button>
</template>

<script>
import {
    
     inject } from 'vue'
export default {
    
    
	setup() {
    
    
    const info = inject('info')
    // 子组件更新数据
    const updateInfo = () => {
    
    
      info.name = 'Nick'
      info.age = 10000
    }
    return {
    
    
      info,
      updateInfo
    }
  }
}
</script>

效果图：

通过上面案例我们还能清楚的看到父组件和子组件可以相互更新数据，但建于后续的维护，官方的推荐做法是将更新数据函数 统一放到父组件A.vue 管理并 provide 出去， 子组件要更新时 inject 进来调用即可，遵循自顶向下规则，所以我们参考官方稍微调整一下：

A.vue
const updateInfo = () => {
    
    
 info.name = 'Jack'
 info.age = 8000
}
provide('updateInfo', updateInfo)

C.vue
const updateInfo = inject('updateInfo')

好了，内容就这么多，喜欢就点个小赞，欢迎有问题的小伙伴到下方评论。

另外笔者还整理了 Vue3 学习指南总结 ，感兴趣的话可以去瞧一瞧。