vue3.0 provide/inject

原创已于 2022-05-28 08:15:40 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-05-22 15:25:39 首次发布

vue3.0 专栏收录该内容

26 篇文章

订阅专栏

本文讲解了在Vue中如何通过provide/inject解决子组件访问父组件实例的问题，强调了使用这些方法的稳定性和灵活性，尤其是在组件嵌套结构变化时。还介绍了如何设置响应式数据、修改数据的最佳实践以及防止数据被意外修改的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景：
	.遇到嵌套组件并且子组件需要访问父组件实例的时候，避免直接使用 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')