自定义Vue中的v-model双向绑定

v-model双向绑定实际上就是通过自组件中的$emit方法转发input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式将value传递给子组件的value值，再由子组件绑定input的value属性即可。

v-model的本质就是语法糖，即

1
<input type="text" v-model="name">

相当于

1
<input type="text" :value="name" @input="name = $event.target.value">

➡️ 我们动手实现一波：

子组件传值

首先，自组件需要一个input标签，这个input标签需要绑定input事件，$emit触发父组件的input事件，通过这种方法子组件传递值给父组件

1
2
// my-comp.vue
<input type="text" :value="name" @input="name = $event.target.value">

父组件监听input并传递props属性

1
2
3
4
5
6
7
8
9
10
<my-comp @input="value=$event" :value="value"/>
<script>
  export default {
    data(){
      return {
        value: ''
      }
    }
  }
</script>

直接使用v-model指令

1
<my-comp v-model="value"/>

然后需要在my-comp.vue组件中修改v-model指令，制定prop和event：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  export default {
    name: 'MyComp',
    props: {
      checked: {
        type: Boolean,
        default: false
      }
    },
    model: {
      prop: 'value',
      event: 'input'
    }
  }
</script>