自定义组件中的v-model

v-model官方解释

两种应用场景

input输入框

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

  <input v-model="text">
    等价于
  <input :value="text" @input="event => text = event.target.value">
  

• <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

  <input v-model="checked">  
    等价于
  <input :checked="checked" @change="event => checked = event.target.checked">
  

• <select> 会绑定 value property 并侦听 change 事件：

  <select v-model="select">
  </select>
    等价于
  <select :value="select" @change="event => select = event.target.value">
     <option value="12">12</option>
     <option value="34">34</option>
  </select>
  

自定义组件

Vue2中

<myComponent v-model="hello"></myComponent>
  等价于
<myComponent :value="hello" @input="xxx"></myComponent>

Vue3中

<myComponent v-model="hello"></myComponent>
  等价于
<myComponent :modelValue="hello" @update:modelValue="xxx"></myComponent>

<myComponent v-model:name="hello"></myComponent>
  等价于
<myComponent :name="hello" @update:name="xxx"></myComponent>

补充：

在组件内部改变值，触发update:xxx事件，具体写法如下:

setup(props,context){
  context.emit('update:xxx',修改之后的值)
}