vue3.0 provide/inject
使用场景:
.遇到嵌套组件并且子组件需要访问父组件实例的时候,避免直接使用 this.$parent,尽量使用 provide/inject
.因为一旦你的组件嵌套关系发生变化,this.$parent 可能就不符合预期了,而 provide/inject 却不受影响
1、上级组件导入
import { provide } from 'vue';
setup(){
provide('key', value)
(1)使得数据具有响应性
provide(key,ref(...))
provide(key,reactive(...))
(2)在inject中修改provide中数据最佳实践
provide(key,(newData)=>{
xx.value=newData;
})
(3)阻止inject中对数据的修改
provide(key,readonly(obj))
}
2、子级组件导入
import { inject } from 'vue';
setup(){
const data=inject(key,'默认值');
const data=inject(key,()=>{return [...]}); 复杂类型默认值
const data=inject(key,fn,false); 第三个参数传递false表示将函数作为默认值
}
3、全局使用
import { createApp } from 'vue'
const app = createApp({
inject: ['user'],
template: `
<div>
{{ user }}
</div>
`
})
app.provide('user', 'administrator')
版权声明:本文为weixin_43294560原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。