自定义组件的v-model

若想封装表单上通用或美化组件，可用自定义组件v-model来实现，默认props为value和事件为input

input[type=“text”]的自定义组件

父组件上代码

<template>
  <div>
    <input-model v-model="inputVal" />
    {{inputVal}}
  </div>
</template>
<script>
import InputModel from "@/components/InputModel.vue";
export default {
  data() {
    return {
      inputVal: "默认值"
    };
  },
  components: {
    InputModel
  }
};
</script>

子组件InputModel.vue上代码

<template>
  <div>
    <input :value="value" @input="$emit('input',$event.target.value)" />
  </div>
</template>
<script>
export default {
  props: {
    value: String
  }
};
</script>

input[type=“checkbox”]的自定义组件

父组件上代码

<template>
  <div>
    <checkbox-model v-model="checked" />
    {{checked}}
  </div>
</template>
<script>
import CheckboxModel from "@/components/CheckboxModel.vue";
export default {
  data() {
    return {
      checked: false
    };
  },
  components: {
    CheckboxModel
  }
};
</script>

子组件CheckboxModel.vue上代码

<template>
  <div>
    <label>
      <input type="checkbox" :checked="checked" @input="$emit('change',$event.target.checked)" />
      {{label}}
    </label>
  </div>
</template>
<script>
export default {
  name: "CheckboxModel",
  model: {
    prop: "checked",
    event: "change"
  },
  props: {
    checked: Boolean
  }
};