vue2.x和vue3.x，自定义组件的v-model区别

Vue2.0自定义组件实现v-model

​ vue2.0 子组件只允许有一个 v-model

 1. 子组件需要配置model选项，指明v-model的prop以及事件名称
 2. 然后子组件用props接收传值，` $emit()`

//父组件
<template>
  <div>
    <Child v-model="message" />
    <div>绑定的值：{{message}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <input 
      type="text" 
      :value="value" 
      @input="$emit('change', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  //2.x用法,可以修改prop和触发的事件名称，model在3.0已经废弃
   model: {
     prop: 'value', //3.x默认值改为了modelValue
     event: 'change' //3.x默认值改为了update:modelValue
   },
   props:{
     value
   }
}
</script>

Vue3.x自定义组件实现v-model

1.子组件的props和事件，需要和v-model冒号后的绑定值相对应，例如若绑定值为 v-model:text，则子组件中

props应为:props:[text] ,事件应为: update:text

2.vue3.x，删除了vue2.x中的model选项，并可以设置多个v-model

//父组件
<template>
  <div>
		<!-- v-model后不写值，默认就是modelValue -->
    <Child 
      v-model="message1"
      v-model:text="message2" 
    />
    <div>绑定的值1：{{message1}}</div>
    <div>绑定的值2：{{message2}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <!-- 3.x默认值改为了update:modelValue-->
    <input 
      type="text" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    >
    <input 
      type="text" 
      :value="text" 
      @input="$emit('update:text', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  // 3.x默认值改为了modelValue
  props:['modelValue','text']
}
</script>

标签：绑定,自定义,text,vue3,vue2,props,组件,model,modelValue
来源： https://www.cnblogs.com/student007/p/15893211.html