vue的provide和inject特性
vue的provide和inject特性
Daotin
发布于 2019-07-28 14:04:18
发布于 2019-07-28 14:04:18
由来
组件之间的通信可以通过props和$emit的方式进行通信，但是如果组件之间的关系非常复杂的话，通过以上的方式会很麻烦，并且程序会非常脆弱，没有建中性可言。
在==vue2.2.0 中新增provide和inject属性==，可以方便的帮助我们进行组件间的传值。
使用的方式很简单： ==父组件通过provide提供数据，其他组价可以使用inject注入数据。==
注意
==不推荐直接用于应用程序代码中。一般使用的场景是自定义组件库的时候，底层组件之间需要通信的时候使用。==
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
特点
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
格式
provide 选项应该是==一个对象或返回一个对象的函数==。该对象包含可注入其子孙的属性。
inject 选项应该是：
- ==一个字符串数组==
- 或 ==一个对象==，对象的 key 是本地的绑定名（自定义的一个名字），value 是： 在provide传过来的值(字符串或 Symbol)，或 一个对象，该对象的： from 属性是provide传过来的 (字符串或 Symbol) default 属性是降级情况下使用的 value
示例：
父组件
<template>
<div>
<h1>HelloWorld</h1>
<One></One>
</div>
</template>
<script>
import One from "./One";
export default {
components: { One },
// provide: {
// for: "这是父组件的provide"
// }
provide() {
return {
for: "这是父组件的provide"
};
}
};
</script>子组件1：
<template>
<div>
<h2>childOne组件</h2>
{{demo}}
<Two></Two>
</div>
</template>
<script>
import Two from "./Two.vue";
export default {
name: "One",
// inject: ["for"],
inject: {
for: {
default: () => ({})
}
},
data() {
return {
demo: this.for
};
},
components: {
Two
}
};
</script>子组件2：
<template>
<div>
<h2>childtwo组件</h2>
{{demo}}
</div>
</template>
<script>
export default {
name: "Two",
// inject: ["for"],
inject: {
for: {
default: () => ({})
}
},
data() {
return {
demo: this.for
// demo: "childTwo"
};
}
};
</script>此时，两个子组件均会收到父组件传递的数据：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录