Vue中provide和inject 用法
作者：互联网
1.概念
成对出现：provide和inject是成对出现的
作用：用于父组件向子孙组件传递数据
使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
2.简单来说
provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
父组件定义：
| 1 2 3 4 5 6 7 8 9 10 |
<script>
export default {
// 父组件通过provide将自己的数据以对象形式传出去
provide(){
return {
parentValue:"我是父组件的值啊"
}
}
};
</script>
|
子孙组件接受方式：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
<script>
export default {
// inject:["parentValue"], // 使用一个注入的值作为数据入口：
inject:{
// 使用一个默认值使其变成可选项
parentValue: { // 健名
from: 'parentValue', // 来源
default: 'parentValue' // 默认值
}
}
}
</script>
|
不论子组件有多深
标签：parentValue,Vue,provide,default,inject,provider,组件 来源： https://www.cnblogs.com/onesea/p/15351584.html