vue中provide和inject 用法
一、概念解析
成对出现：provide和inject是成对出现的
作用：
用于父组件向子孙组件传递数据
使用方法：
provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
使用场景：
由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
二、代码解析
父组件：
<template>
<!-- 父组件 -->
<div class="block">
<son></son>
</div>
</template>
<script>
import sun from "./comp/sun.vue";
import son from "./comp/son.vue";
export default {
// 父组件通过provide将自己的数据以对象形式传出去
provide(){
return {
parentValue:"我是父组件的值啊"
}
},
components:{
sun,
son
}
};
</script>
子组件：
<template>
<div style="background:red">
我是子组件
<p>我接受父组件传递的值：{{parentValue}}</p>
<sun></sun>
</div>
</template>
<script>
import sun from "./sun.vue";
export default {
// inject:["parentValue"], // 使用一个注入的值作为数据入口：
inject:{
// 使用一个默认值使其变成可选项
parentValue: { // 健名
from: 'parentValue', // 来源
default: 'parentValue' // 默认值
}
},
components:{
sun
},
created(){
console.log("this.parentValue:",this.parentValue)
}
}
</script>
孙组件：
<template>
<div style="background:green">
我是孙组件
<p>我接受父父组件传递的值：{{parentValue}}</p>
</div>
</template>
<script>
export default {
inject:["parentValue"],
}
</script>结果：
我们可以查看到父组件和子组件中都可以接收到父组件传递过来的值
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
