v-model原理及自定义组件的使用

v-model原理

v-model实际上时语法糖，下面就是语法糖的构造过程。

而v-model自定义指令下包裹的语法是input的value属性、input事件，整个过程是：

<input v-modle="inputV" />
// 等同于
<input :value="inputV" @input="inputV = $event.target.value"/>

input属性绑定——inputV变量，也就是将值传给input；
input事件，该事件在input的值inputV改变时触发，事件触发时给inputV重新赋值，所赋的值是$event.target.value，也就是当前触发input事件对象的dom的value值，也就是该input的值。

这就完成了v-model的数据双向绑定。

我们会发现elementUI的所有自定义组件都适用v-model这一语法糖，除了input之外，select、textarea也用到这一语法糖。

text和textarea元素：v-model使用value属性设置初始值并绑定变量，input事件更新值；
checkbox和radio元素：v-model使用checked属性设置初始值并绑定变量，change事件更新值；
select元素：v-model使用value属性设置初始值并绑定变量，change事件更新值；

比如checkbox：

// 看似执行了v-model一个指令
<input type="checkbox" v-model="checkedNames">
// 实际上
<input
  type="checkbox" 
  :value="checkedNames" 
  @change="checkedNames = $event.target.value" 
/>

自定义组件的v-model

父组件标签写法

<my-component v-model="myData" />

子组件写法，按照value值绑定和input事件更新值来拆解。

首先，需要在子组件接收一个value的prop（用于值绑定，或者设置初始值）

props:{
  value:{
    type:String,
    default:''
  }
}

然后，在组件内部更新值，在需要更新值的逻辑部分写入

this.$emit('input', newData);

这样就是在组件内部拿到了值，并且手动触发input事件更新了值，但在父组件只需要写入v-model指令即可，也算是父子组件传值的一种。