本篇内容介绍了“Vue中怎么使用provide与inject”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
在
vue2.0provideinjectAPI也就是父子组件间的通信,父组件上市通过自定义属性,而子组件间通过
propsprovideinject在
vue3.0provideinject还是要从具体的实例出发
provide()函数
定义:提供一个值，可以被后代组件注入
实现: 父组件有一个
provideinjectprovide(第一个参数,第二个参数),接收两个参数,第一个参数是要注入的
keysymbolprovidevuecomponsition API具体示例代码如下所示
import {reactive,provide} from "vue";
let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);通过上面的
provideinjectinject()函数
定义: 注入一个由祖先(父)组件或整个应用提供的值
实现: 接收父(祖)组件传递过来的值
inject(第一个参数,第二个参数(可选))keyVuekey如果没有能通过
keyinject()undefined第二个参数是可选的,即没有匹配到
key那么必须将
false与注册生命周期钩子的
APIinject()setup()具体示例代码
import {inject,toRefs} from "vue";
const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);在孙组件中的模板即可以读取,从父组件传递过来的数据也是支持响应式的
{{person.name}}---{{person.website}}若使用解构时,则模板中可直接使用变量
{{name}}--{{website}}若使用解构时,则模板中可直接使用变量
{{name}}--{{website}}注意
如果是解构变量,想要数据响应式,那么需要使用
toRef()toRefs()如下是完整的示例
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'
// 注入值的默认方式
const foo = inject('foo')
// 注入响应式的值
const count = inject('count')
// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)
// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())
// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值