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