【Vue 经验分享】封装表单子组件

目标：子组件双向绑定表单项的数据

模板代码

<!-- 表单 -->
<a-form-model>
    <a-row :gutter="16">
        <a-col :span="24">
          <a-form-model-item
            prop="isImportClient"
            label="Is Important Client"
          >
            <YesNoRadioGroup v-model="formData.isImportClient" :disabled="!editable" />
          </a-form-model-item>
        </a-col>
    </a-row>
</a-form-model

<!-- 子组件 -->
<template>
  <!-- attrs 包含组件接收到的，除props之外的所有属性 -->
  <!-- listeners 包含组件接收到的所有事件监听器 -->
  <a-radio-group v-bind="$attrs" v-on="$listeners">
    <a-radio key="y" value="y">
      {{ Yes }}
    </a-radio>
    <a-radio key="n" value="n">
      {{ No }}
    </a-radio>
  </a-radio-group>
</template>