如何在Vue中自定义v-model

一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value属性用于不同的目的。为组件自定义一个v-model选项可以用来避免这样的冲突。

使用方法

Vue 2.2.0+

父组件

<template>
    <child-comp v-model="formData.hahah"></child-comp>
</template>

<script>
  import childComp from '@/components/child-comp.vue'
  export default {
    name: 'parentComp',
    components: [childComp],
    data () {
      return {
        formData: {
          hahah: ''
        }
      }
    }
  }
</script>

子组件

<template>
    <div>
      <span>{{heihei}}</span>
      <button @click="changeData">修改数据</button>
    </div>
</template>

<script>
  export default {
    name: 'childComp',
    model: {
      prop: "heihei", //双向绑定prop传来的"heihei"
      event: "changeChildData" //定义一个事件，以便从子组件传递数据到父组件
    },
    props: {
      heihei: String
    },
    data() {
      return {
        myData: '改成这个吧',
      }
    },
    methods: {
      changeData() {
        console.log("点击了修改数据")
        this.$emit('changeChildData', this.myData)
      }
    }
  }
</script>

Vue 3.0+

父组件

<template>
    <childComp v-model.value="formData.hahah" v-model.cValue="formData.huhu"></childComp>
</template>

<script setup>
  import { ref } from 'vue';
  import childComp from '@/components/child-comp.vue'

  const formData = ref({
    hahah:"",
    huhu:"",
  });
</script>

子组件

<template>
  <span>{{heihei}}</span>
  <span>{{dongdong}}</span>
  <button @click="changeData">修改数据</button>
</template>

<script setup>
  import { ref, defineProps, defineEmits } from 'vue';
  const prop = defineProps({
    modelValue: String,
    cValue: String,
  })
  const emit = defineEmits(['update:modelValue', 'update:cValue'])
  const heihei = ref('改成这个吧')
  const dongdong = ref('可以绑定多个')
  const changeData = () => {
    emit('update:modelValue', heihei)
    emit('update:cValue', dongdong)
  }
</script>