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

1、provide&inject 是什么

正常情况下，父子组件之间的数据传递需要用到 props 属性，这里就会有问题，如果父组件的数据需要送到 N 层子组件，那么就要传递 N 次 props 属性，非常繁琐，而 provide / inject 就是用来解决 props 多层嵌套的问题，有了它，只需声明一次数据就够了，使用方式也很简单。

2、provide&inject 的使用

假设父组件是 A.vue ，子组件是 B.vue，子子组件是C.vue，如果 C.vue 子子组件想要 A.vue 父组件的数据，我们只需在 A.vue 父组件调用 provide 函数导出数据， 然后 C.vue 调用 inject 函数导入数据就可以了，无须经过 B.vue 组件层，
案例如下：

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

是不是很简单，我们来看看完整代码和效果图：

父组件 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>

通过上面案例我们还能清楚的看到父组件和子组件任意方改动数据时都会同步更新，但建于后续的维护，官方的推荐做法是由调用 provide 函数的组件负责维护，这里便是由父组件A.vue 负责管理 provide 的数据， 子组件只需 inject 进来调用即可，遵循自顶向下规则，这里我们按照官方的规范稍作修改：

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

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

这里将改动数据的操作迁移至 A.vue 父组件中管理并提供函数，子组件只需引入调用即可。

本文就到这里，对于使用 TS 项目的同学，建议前往 Vue3 & InjectionKey 的作用、使用 阅读了解 InjectionKey 函数，使用方式也很简单，是 provide&inject 的好搭档。

另外笔者整理了 Vue3 学习指南总结 ，有兴趣的话可以看看。