Vue3 Provide/Inject 依赖注入_vue3 provider

简介

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

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

作用

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

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

使用

设置数据为响应式更新：

1. 使用 ref / reactive 创建响应式变量
2. 使用 provide(‘name’, ‘要传递的响应式变量’)
3. 添加一个更新 响应式变量的事件，这样响应式变量更新， 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'
/
1
2
3
4
5
6
7
8