Vue v-model 在组件上用法(prop emit相关规定 修饰符的访问)

v-model 是表单双向数据绑定的简写方式
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为监听事件。

不简写：

v-bind:value="xxx" 
v-on:input="xxx=$even.target.value"

在组件上使用 v-model 绑定子组件的input value

通过 prop 与 固定格式的 emit 事件 配合
绑定的方法：

v-model:propname="xxx"

默认prop为 modelValue
也就是说使用 v-model="xxx" 的绑定方式
相当于 v-model:modelValue="xxx"
对应抛出的事件名 update:propname结构，
默认 update:modelValue

例子：

<my-component v-model:propX="xxxx"></my-component>

{
  props: {
    propX: String
  },
  emits: ['update:propX'],
  template: `
    <input
      type="text"
      :value="propX"
      @input="$emit('update:propX', $event.target.value)">
  `
}

修饰符传递

在 3.x 中，添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件
组件可以通过 modelModifiers 访问修饰符状态

对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"
=> 绑定特定propname 则 对应 propnameModifiers prop访问修饰符状态