v-model 可以被用在自定义组件上吗？如果可以，如何使用？

类别：vue / 日期：2022-08-24 / 浏览：225 / 评论：0

可以。v-model 实际上是一个语法糖，如：

<input v-model="searchText">

实际上相当于：

<input v-bind:value="searchText"v-on:input="searchText = $event.target.value">

用在自定义组件上也是同理：

<custom-input v-model="searchText">

相当于：

<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>

显然，custom-input 与父组件的交互如下：

1. 父组件将searchText变量传入 custom-input 组件，使用的 prop 名为value；

2. custom-input 组件向父组件传出名为input的事件，父组件将接收到的值赋值给searchText；

所以，custom-input 组件的实现应该类似于这样：

Vue.component("custom-input", {
  props: ["value"],
  template: `<input
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
    >`
});