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 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>