Vue2实现自定义form表单组件绑定v-model

实现功能

• 实现子组件form表单绑定多个input值

• 使用情景

  • 写组件的时候，好多时候子组件需要主动修改父组件的值，或者绑定。这时候再用单纯的父子组件通信显得不合适，最好是让父组件不再过多的自己去操作数据，不然就不像一个本分的组件了，这时候就需要v-model。

代码实现

• 父组件

<template>
    <son-comp v-model="purchaseInfo"></son-comp>
</template>

<script>
    import sonComp from "./son-comp.vue";
    components: {
        sonComp
    },
    data() {
      return {
        purchaseInfo: {
          name: '',
          idType: '0', // 下拉选择
        }, // 人信息
      }
  },
</script>

• 子组件

<template>
  <!-- 投保人模块 -->
  <div class="mt-5">
    <h5 class="fw-bold mb-3">投保人信息填写</h5>
    <form>
      <div class="row mb-3 text-sm-end">
        <label for="inputEmail3" class="col-sm-2 col-form-label">姓名</label>
        <div class="col-sm-4">
          <input
            type="text"
            class="form-control"
            id="inputEmail3"
            @input="inputChange($event, 'name')"
            :value="purchaseInfo.name"
            placeholder="请输入本人姓名"
          />
        </div>
      </div>
      <div class="row mb-3 text-sm-end">
        <label for="inputPassword3" class="col-sm-2 col-form-label"
          >证件类型</label
        >
        <div class="col-sm-4">
          <select class="form-select" aria-label="Default select example" :value="purchaseInfo.idType" @change="inputChange($event, 'idType')">
            <option value="0" selected>身份证</option>
            <option value="1">港澳通行证</option>
            <option value="2">外国护照</option>
            <option value="3">港澳台居民居住证</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'son-comp.vue',
  model: {
    prop: 'purchaseInfo',
    event: 'inputChange'
  },
  props: {
    purchaseInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
  },
  methods: {
    inputChange(e, type) {
      this.$emit('inputChange', {...this.purchaseInfo, [type]: e.target.value})
    },
  }
}
</script>

<style scoped></style>

实现重点注意地方

• 代码中类名定义可以忽略不计，因为在项目中引用了bootstrap
• 引用官网的介绍，v-model其实是v-bind和v-on:事件的语法糖，负责监听用户的输入事件以更新数据

所以我们在组件上使用了该特性

官网关于在组件上使用v-model的介绍

• 在组件上使用 v-model
• 自定义组件的 v-model

所以在组件上以此种方式绑定

<son-comp v-model="purchaseInfo"></son-comp>

至此，我们完成了组件数据的双向绑定，在父组件中可以实时处理用户信息数据的录入