vue 的provide/inject
程序员文章站
2022-03-27 17:17:20
...
-
类型:
-
provide:
Object | () => Object
-
inject:
Array<string> | { [key: string]: string | Symbol | Object }
-
provide:
-
详细:
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>
下一篇: 黄牛肉和牦牛肉哪个好吃?有什么不同之处?