ElementPlus选项组通信逻辑详解

Element Plus 中 ElRadioGroup 和 ElCheckboxGroup 的通信机制巧妙融合插槽、provide/inject 与 v-model 双向绑定，实现子项值的自动收集与选中状态的响应式同步——父组件通过 provide 暴露上下文（含响应式 modelValue 和注册/更新方法），子组件主动 inject 并注册自身，再借助 computed 建立与父级数据的双向映射，全程无需事件总线、全局状态或手动 ref 操作，轻量解耦且天然支持跨层级嵌套场景，是 Vue 3 响应式与组合式 API 协同设计的典型范例。

Element Plus 的 ElRadioGroup 和 ElCheckboxGroup 能自动收集子项（如 ElRadio 或 ElCheckbox）的值，核心在于父子组件通过插槽 + provide/inject + v-model 双向绑定协同完成通信。不依赖事件总线或全局状态，轻量且解耦。

插槽透传与子组件注册

父组件（如 MyRadioGroup）用 渲染子项，并在 setup 中调用 provide 暴露注册方法：

const { provide } = defineComponent({
  setup(props, { slots }) {
    const modelValue = ref(props.modelValue)
    const register = (child: RadioItem) => {
      // 缓存子组件实例，用于后续同步值
      children.push(child)
    }
    provide('radioGroupContext', {
      modelValue,
      register,
      onChange: (val: any) => {
        modelValue.value = val
        emit('update:modelValue', val)
      }
    })
    return () => h('div', { class: 'my-radio-group' }, slots.default?.())
  }
})

子组件主动注入并绑定 v-model

子组件（如 MyRadio）在 setup 中用 inject 获取上下文，并将自身“注册”到父组；同时把 v-model 绑定到父级的 modelValue：

• 通过 inject('radioGroupContext') 拿到 modelValue 和 onChange
• 在 onMounted 调用 context.register({ value, id, ... })
• 用 computed 建立双向映射：
  model: { get: () => context.modelValue.value, set: v => context.onChange(v) }

值同步与选中逻辑处理

父组件不直接操作子组件 DOM，而是靠响应式驱动渲染。子组件根据当前 modelValue 判断是否选中：

• MyRadio 的 isChecked 是 computed(() => props.value === context.modelValue.value)
• 点击时触发 context.onChange(props.value)，父组件 modelValue 更新 → 所有子组件自动重算 isChecked
• 无需手动遍历子组件、也不需要 $refs 或 ref 列表更新状态

支持非直接子组件（嵌套插槽场景）

若子项被包装（例如 ），需确保子组件仍能访问 inject 上下文。Vue 3 的 provide/inject 是跨层级的，只要在渲染链路中未被新的 provide 覆盖即可生效。必要时可在中间 wrapper 组件中透传 context：

const ctx = inject('radioGroupContext')
if (ctx) {
  provide('radioGroupContext', ctx) // 显式向下透传
}

今天关于《ElementPlus选项组通信逻辑详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！