v-model实现原理和sync修饰符

Posted 2021-07-11 奥特曼　

一、v-model

input

我们知道v-model能够实现双向绑定，其实他是一个语法糖

 <input type="text" v-model="message" />

 如果不用v-model 用下面的方法仍然能够实现双向数据绑定

<input type="text" :value="message" @input="message = $event.target.value" />

:value="message" 是用来绑定message变量的值 ，通过 @input绑定输入框事件，在通过$event.target.value 把输入框输入的值赋值给当前变量message，

:value  是 v-bind="value" 的语法糖  注意如果不写: 他会当成一个字符串来看

二、组件中进行双向数据绑定

之前都是直接进行绑定输入框，其实也可以对子组件进行绑定

父组件

<son :value="message" @input="(val)=>this.message=val"></son>
//等价于  <son v-model="message"></son>

子组件通过$emit传过来的事件名 要和当前input事件名是一样的  

子组件

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

子组件接收到父组件的值进行绑定input后 并进行$emit把input事件传过去，传的值正好是当前输入框的值

默认props接收的变量名和自定义事件input是不允许更改的

如果想更改value等、input的属性名

父

  <son :value2="message" @input2="(val)=>this.message=val"></son>
  //v-model不需要任何操作  <son v-model="message"></son>

子

<template>
    <div>
        <input type="text" :value="value2" @input="$emit('input2',$event.target.value)">
    </div>
</template>

<script>
export default {
  model: {
    event: 'input2',
    prop: 'value2'
  },
  props: ['value2']
}
</script>

效果图

三、sync修饰符

sync和v-model很相似，都可以实现父子组件中的通信，和v-model最大的区别就是在于 .sync可以有多个，v-model只能有一个

父

<son :abc.sync="message"></son>

上面这句话相当于   message=val"    相当于多了监听事件 事件名为@update:abc而子组件传的正式 @update:abc的事件名

子  

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

绑定多个.sync

父

 <son :abc.sync="message" :bcd.sync="age">son</son>

子

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

  props: ['abc', 'bcd']

总结

.sync和v-model的区别 

相同点：都是语法糖，都能够实现父子组件中的数据双向通信

区别：

格式不同： v-model="num"   :abc.sync="num"

v-model        @input+valu 

:num.sync:   @update:num

v-model只能用一次，.sync可以有多个

扩展

props的传递时异步的，传递出问题的时候回来看看这句话！！