简介

在 Vue 2 中，使用 Provide/Inject 跨组件共享数据，在 Vue 3 中也可以，甚至可以在不依赖VueX的前提下，实现全局状态共享。

使用 Provide 时，一般设置为响应式更新的，这样的话，父组件变更，子组件、子孙组件也跟着更新。

作用

实现祖与后代组件间通信。

具体实现：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据。

使用

设置数据为响应式更新：

使用 ref / reactive 创建响应式变量
使用 provide(‘name’, ‘要传递的响应式变量’)
添加一个更新响应式变量的事件，这样响应式变量更新， provide 中的变量也跟着更新。

实例

provide

provide接受两个参数，第一个参数是provide唯一名称，第二个参数是需要暴露的数据。

父组件 provide：

<template>
  <HelloWorld></HelloWorld>
</template>

<script lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
import { ref, reactive, provide, defineComponent } from 'vue'
// `Provide/Inject` 在 `setup` 中 使用，必须从 `vue` 中导入使用。
export default defineComponent({
  name: 'Home',
  components: { HelloWorld },
  setup() {
    const description = ref('Hello World，this is index page,I am father component')
    const obj = reactive({
      name: 'xiaoming',
      age: '20',
    })
    function changeProvideInfomation() {
      obj.name = 'xiaofang'
    }
    provide('desc', description)
    provide('obj', obj)
    return {
      changeProvideInfomation,
    }
  },
})
</script>

Tips：provide 第一个参数最好用Symbol，避免重复。

inject

inject 接收两个参数，第一个参数是provide名称，第二个参数是默认数据。（如果provider没有暴露自己的数据，那么使用inject默认数据。）

子组件 inject ：

<template>
  <p>fatherDescription:{{ fatherDescription }}</p>
  <p>fatherObj.name:{{fatherObj.name}}</p>
  <p>fatherObj.age:{{fatherObj.age}}</p>
</template>

<script lang="ts">
import { inject, defineComponent } from 'vue'
// `Provide/Inject` 在 `setup` 中 使用，必须从 `vue` 中导入使用。
export default defineComponent({
  name: 'helloworld',
  setup() {
    const fatherDescription = inject('desc')
    const fatherObj = inject('obj')

    return { fatherDescription, fatherObj }
  },
})
</script>

页面效果：
在这里插入图片描述

provide和inject都只能在setup函数中使用。

`provide+inject` 取代 `Vuex`

Tips：在 Vue 项目中，如果不想引入 Vuex，也可以考虑用provide+inject取代它，具体如下：

自定义并 export 一个 hook叫 setProvide，在这个 hook中使用 provide 注册一些全局状态；
自定义并 export 一个 hook 叫 useInject，在这个 hook 中使用 inject 接收 provide 的全局状态；
在根组件的 setup 函数中调用 setProvide；
接下来，就可以在任意的子组件共享这些全局状态。