组件 v-model

[TOC]

v-model 可以在组件上使用实现双向绑定。
首先让我们回忆一下 v-model 在原生元素上的用法：

<input v-model="searchText" />

在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

而当使用在一个组件上时，v-model 会被展开为如下的形式：

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来，<CustomInput>组件内部需要做两件事：

将内部原生<input>元素的 value 属性绑定为modelValue；
当表单的input事件触发时，触发一个携带了新值的update:modelValue自定义事件； ```vue

``` 现在`v-model`可以在这个组件上正常工作了： ```html ``` ## v-model 的参数默认情况下，`v-model`在组件上都是使用 modelValue 作为 prop，并以`update:modelValue`作为对应的事件。我们可以通过给`v-model`指定一个参数来更改这些名字： ```html ``` 在这个例子中，子组件应在`props`中注册`title`属性，并通过触发`$emit`发送一个名为`update:title`的事件更新父组件值： ```vue ``` ## 多个 v-model 绑定利用刚才在 v-model 参数小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。
组件上的每一个 v-model 都会同步不同的 prop，而无需额外的选项： ```html ``` ```vue ``` ## 处理 v-model 修饰符在学习输入绑定时，我们知道了 v-model 有一些内置的修饰符，例如`.trim`、`.number`和`.lazy`。在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。我们来创建一个自定义的修饰符`.prefixer`，它会自动将 v-model 绑定输入的字符串值拼接上“UP主：” ```html ``` 组件的 v-model 上所添加的修饰符，可以通过`modelModifiers`在组件内访问到。
在下面的组件中，我们声明了`modelModifiers`这个属性，它的默认值是一个空对象： ```html


对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是`arg + Modifiers`。举例来说：
```html
<my-input v-model:my-name.prefixer="myName" />

相应的声明是：

export default {
  props: ['myName', 'myNameModifiers'],
  emits: ['update:myName'],
  created() {
    console.log(this.myNameModifiers) // { prefixer: true }
  }
}

{{ modelValue }}