组件开发中涉及到 provide 与 inject 的使用
根据Vue官方文档对provide与inject的语法说明:
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
provide 与 inject 可用于祖孙组件间的通信
在Onestar-ui组件库开发中 Radio与RadioGroup 运用该语法
- 在组件的使用中, RadioGroup组件为Radio统一绑定数据
<os-radio-group v-model="gender">
<os-radio label="1">男</os-radio>
<os-radio label="2">女</os-radio>
<os-radio label="3">体育</os-radio>
<os-radio label="4">吃饭</os-radio>
</os-radio-group>
<script>
export default {
name: 'App',
data() {
return {
gender: '1',
};
},
};
</script>
- 在RadioGroup组件中就能获得绑定的数据
Radio组件中也需要获得value值。
一般情况下, 可以通过this.$parent
获取值, 但若是Radio组件与RadioGroup组件又存在别的组件, 则无法进行父子间取值。
那么就需要 provide 与 inject。
- 在RadioGroup组件中, 通过provide将整个RadioGroup组件传递出去
provide() {
return {
RadioGroup: this, // 值名称 : 值
};
},
- 在Radio组件中, 通过inject接收RadioGroup组件中的值
inject: {
RadioGroup: {
default: '',
},
},
这样就可以实现进行跨组件的通信
转载自:https://juejin.cn/post/7080420757771124766