provide/inject响应式实现

最新推荐文章于 2024-03-28 09:40:06 发布

小叶_01

最新推荐文章于 2024-03-28 09:40:06 发布

阅读量406

点赞数 2

分类专栏：工作+面试文章标签： vue 前端 javascript 学习

本文链接：https://blog.csdn.net/qq_38799387/article/details/125737583

版权

工作+面试专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨Vue框架中provide-inject特性，用于实现祖先组件向子孙组件的依赖注入，即使在深层组件中依然有效。尽管provide-inject的绑定不是响应式的，但可以通过传递可监听的对象实现部分响应性。示例中展示了如何注入数据，包括基本类型和对象，并且可以设置默认值。此外，还介绍了如何通过`from`和`default`指定注入来源和默认值。

摘要由CSDN通过智能技术生成

简介

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
注

provide 和 inject 绑定并不是可响应的。
然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

父组件
data(){
	return{
		num:1,
		flag:1,
		obj: {   
			name: 'eavan'
		},
		obj1: {        
			name: {
				aa:'test1'
			},
		}
	}
},
provide() {
	return{
		flag:this.flag,//不可以做到响应式
		num:() => this.num,//配合计算属性实现响应式，或者直接调用num（）
		obj: this.obj, //是对象，能实现响应式
		obj1: this.obj1 //是对象，能实现响应式（深层也可以）
	}
},
子组件 
inject: ['num','obj','flag','obj1'],
computed: {
	numChild() {
		return this.num()
	},
},
 现在注入还可以标注 来源，默认值配合对象来写
补充
 inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }