最近刚好有个需求,移动端tab栏,但是数据又在一个接口中,想用props传参,个人觉得有点麻烦,于是研究一下,发现了一个好用的属性,provide. 附上官网地址:provide/inject
简介
provide 属性作用就是通过声明provide(对象|对象的函数),子组件调用了inject就可以注入provider中的数据,个人觉得比prop属性更加灵活
实践
//父组件代码
<template>
<div>
<div style="color:green">父组件:{{msg}}</div>
<div style="color:green">父组件:{{grandMsg}}</div>
<div>
<injectChild1></injectChild1>
</div>
<div>
<injectChild2></injectChild2>
</div>
<el-button type="primary" @click="changegrandMsg">点击修改msg</el-button>
</div>
</template>
<script>
export default {
name: "prvideusageindex",
data() {
return {
msg: "我是父组件数据",
grandMsg: "直接传到孙子组件"
};
},
provide() {
return {
demo: this.msg,
grandMsg:() => this.grandMsg
};
},
components: {
injectChild1: () => import("./provideugecomponent/injectChild1"),
injectChild2: () => import("./provideugecomponent/injectChild2")
},
methods: {
changegrandMsg() {
this.grandMsg = "传到孙子组件值被修改";
}
}
};
</script>
//子组件1代码
<template>
<div>
子组件1:{{demo}}
</div>
</template>
<script>
export default {
name: "injectChild1",
data() {
return {};
},
inject: ["demo"]
};
</script>
//子组件2代码
<template>
<div>
子组件2:{{demo}}
<injectGrand></injectGrand>
</div>
</template>
<script>
export default {
name: "injectChild2",
data() {
return {};
},
inject: ["demo"],
components: {
injectGrand: () => import("./grandcom/injectgrand"),
},
};
</script>
<style scoped>
//孙子组件代码
<template>
<div>子组件2的子组件:{{changeGrandMsg}}</div>
</template>
<script>
export default {
name: "injectChild2",
data() {
return {};
},
inject: ["grandMsg"],
computed: {
changeGrandMsg() {
return this.grandMsg();
}
}
};
</script>
效果图
点击按钮之前
image.png
点击按钮之后
image.png
