欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 的provide/inject

程序员文章站 2022-03-27 17:17:20
...
  • 类型

    • provideObject | () => Object
    • injectArray<string> | { [key: string]: string | Symbol | Object }
  • 详细

    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

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

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是一个字符串数组,或一个对象

 

我们常用的组件通信是利用prop和props,那么当组件嵌套层次超过两层时,通信会变得十分麻烦,如有A(爷爷)、B(父亲)、C(儿子)三级,C想访问A的数据,则需要B先从A处得到并传给C,然而B并未使用到A处的数据。provide/inject的出现完美的解决了该问题,无论D层,Z层都可快捷的访问到A的数据。

A.vue

<template>
	<div>
		<b prop="data"></b>
	</div>
</template>
 
<script>
export default {
	name: 'A',
	provide: {
		money: '10000000'
	}
}
</script>

C.vue

<template>
	<div>
		<c >{{money}}</c>
	</div>
</template>
 
<script>
export default {
	name: 'C',
	inject: ['money']
	
}
</script>