v-model双向绑定原理，实现自定义v-model
本文会随着时间进行更正
再次更新：2019/10/16 15:39
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，
例如：<my-com v-model="变量"><my-com>将变量的值与自定义组件中的
props: ["value"]定义的value进行数据绑定，props的value获得了变量值在自定义组件中通过
$emit("input",我们想要传递的变量)来手动触发input事件，将$emit的第二个参数值传给<my-com v-model="变量"><my-com>中的变量
-
实现自定义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命令-->
随手点个赞，谢谢大家
更多文章 我的github
