官网:https://cn.vuejs.org/v2/api/#provide-inject
provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深(普通组件传值只能父子或兄弟关系),并在起上下游关系成立的时间里始终生效。
provide 选项应该是:一个对象或返回一个对象的函数
inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名
示例:
父组件中提供
provide() { //重要一步,在父组件中注入一个变量或函数
return {
msg: "demo"
// 提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
}
},
子组件中引入
export default {
inject: ['msg'], // 子孙组件中使用inject接住变量即可,可直接在本组件调用或更改父组件传过来的变量
}
运行顺序:
1.data
2.provide
3.created // 在这个阶段$el还未生成,在这先处理privide的逻辑,子孙组4.件才可以取到inject的值
5.mounted
...
网友评论