v-model 实现原理

首先，v-model 是一个语法糖，封装了 v-bind:value 和 @input

v-model

给出一个代码

<input v-model="something">

实际上是以下例子的语法糖

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

补充1：model 属性

如果在组件内 value 以及 @input 事件可能会被占用，vue 提供了 model 属性，定义 v-model 绑定的属性以及事件，如下例子就是把 v-model 取值用 checked ，触发事件为 @change

props:{
  checked:{
     type:String,
     default:''
  }
},
model:{
  prop: 'checked',
  event: 'change'
}

补充2：在子组件使用 v-model

有些时候为了方便绑定，会在子组件内绑定 v-model 这个实现很简单

父组件

<child v-model="val"></child>

子组件

<template>
    <div @click="handleClick"></div>
</template>

<script>
export default {
  props:{
    value:String
  },
  methods:{
    handleClick(){
        this.$emit('input',this.value+1)
    }
  }
}
</script>

补充3： sync 修饰符

目前 sync 修饰符一样可以实现双向绑定，在原理上和v-model相差无几

<component :foo.sync="bar"></component>

实际上是以下例子的语法糖

<component :foo="bar" @update:foo="val => bar = val"></component>

The issue body is the only provided entry point and contains examples of v-model, component props, emitted input events, and the .sync modifier. No target file or test is named, so first clarify where this explanation belongs and what change is wanted; done should be a reviewed documentation update with the relevant examples.