组件开发中涉及到 provide 与 inject 的使用

根据Vue官方文档对provide与inject的语法说明:

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide 与 inject 可用于祖孙组件间的通信

在Onestar-ui组件库开发中 Radio与RadioGroup 运用该语法

1. 在组件的使用中, 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>

1. 在RadioGroup组件中就能获得绑定的数据

Radio组件中也需要获得value值。 一般情况下, 可以通过this.$parent获取值, 但若是Radio组件与RadioGroup组件又存在别的组件, 则无法进行父子间取值。

那么就需要 provide 与 inject。

1. 在RadioGroup组件中, 通过provide将整个RadioGroup组件传递出去

provide() {
        return {
            RadioGroup: this, // 值名称 : 值
        };
    },

1. 在Radio组件中, 通过inject接收RadioGroup组件中的值

   inject: {
        RadioGroup: {
            default: '',
        },
    },

这样就可以实现进行跨组件的通信