v-model双向绑定原理 实现自定义v-model命令

v-model双向绑定原理

<input type="text" v-model="变量">

首先，变量值和input的value属性进行单向数据绑定,value获得了变量的值

其次，通过@input="变量=$event.target.value"来将值绑定到变量上

这样就实现了双向绑定

<input type="text" v-model="变量">
相同
<input type="text" :value="变量" @input="变量=$event.target.value">

自定义v-model命令

一般都是给自己写的组件做自定义v-model，例如：

将变量的值与自定义组件中的props: [“value”]定义的value进行数据绑定，props的value获得了变量值

在自定义组件中通过
$emit("input",我们想要传递的变量)来手动触发input事件，将$$emit的第二个参数值传给中的变量

实现自定义v-model命令

<!--第一步，给value绑定test变量值-->

 <my-v-model v-model="test"></my-v-model>

<!--第二步，在自定义子组件中定义value接收传进来的test值-->

props: ["value"]

<!--第三步，将value和我们自己写的组件里的input标签
的value进行绑定-->

<input type="text" :value=value>

<!--第四步，手动通过$emit触发input事件将input标签的的value值传递给test变量-->

<input type="text" :value=value @input="$emit('input',$event.target.value)">

<!--实现了自定义v-model命令-->