vue组件库 antd-vue element-plus

几个典型的场景

1. 表单 父子组件交互多
2. 表格

antd-vue

radio，select

可以单独存在，也可以外面包裹 a-radio-group

<a-radio v-model:checked="checked">Radio</a-radio>
<a-radio-group v-model:value="value">
    <a-radio :style="radioStyle" :value="1">Option A</a-radio>
    <a-radio :style="radioStyle" :value="2">Option B</a-radio>
</a-radio-group>

疑问是，父组件，1 怎么监听到子组件的变动，修改value 2 并重置另外一个select。

如点击A，则A选择中，并更新value，并且B从选中重置为未选中。

背后的实现， context ，父组件提供API，子组件通过调用父组件提供API，通知父组件，以及通过父组件属性获取父组件值。

radio

// radio
export default defineComponent({
  setup() {
    return {
      configProvider: inject('configProvider', defaultConfigProvider),
      radioGroupContext: inject('radioGroupContext', null),
    };
  },
  methods: {
      onChange2(e) {
      // ... 省略了一些判断
        this.radioGroupContext.onRadioChange(e) // 通知父组件变更
    }
  }
  render(){
      const props = getOptionProps(this);
      const rProps = {}
      if(radioGroupContext) {
       rProps.onChange = this.onChange2;
         rProps.checked = props.value === radioGroup.stateValue;
    }
         return <radio {...rProps} />
    }
});

核心util getSlot

核心util