携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情
前言
在外面平时日常开发中，有一个指令是我们高频率使用的，就是v-modal，常用于各种input和select及其各种表单做双向数据的绑定，但是本质上它是一个语法糖，除此之外还有一个语法糖就是.sync，它也是做双向数据绑定的一个语法糖。那我们来认识有什么区别吧
认识v-modal
熟知vue框架的都知道v-modal是一个平常到不能再平常的指令来，但是取可以为我们的开发带来极大的效率。
<template>
<div>
<input type="text" v-modal="val"> //重新键入会修改data中的值
</div>
</template>
<script>
export default{
name:"a",
data(){
return{
val:""//这里的值就会修改
}
}
}
</script>
只要我们去修改input的值，data中的值自然就会修改。以前就是直接去操作dom获取的这个值，那这个是怎么做的呢？
v-modal借助了输入框的原生事件input事件，只要值被修改了，就会触发input事件从而拿到最新的值：
<template>
<div>
<!-- <input type="text" v-modal="val"> -->
<input type="text" :value="val" @input="val=$event.target.value">
</div>
</template>
<script>
export default{
name:"a",
data(){
return{
val:""
}
}
}
</script>
这种是标签自身提供了input事件或者其它能够捕获到值的改变的语法糖，但是很多是不支持的。
除吃之外还有绑定父子之间的数据，相信这也是一种高频率的开发技巧。
a.vue
<template>
<div>
<!-- <input type="text" v-modal="val"> -->
<!-- <input type="text" :value="val" @input="val=$event.target.value"> -->
<b v-modal="val"></b>
</div>
</template>
<script>
import b from './a.vue'
export default{
name:"a",
components:{
b
},
data(){
return{
val:""
}
}
}
</script>
b.vue
<template>
<div>
{{value}}
</div>
</template>
<script>
export default{
name:"a",
props:['value'],
data(){
return{
val:""
}
}
}
</script>
将a组件作为父组件，b组件作为子组件，并在a组件定义的组件b上加v-modal，传入val值，但是在b组件中必须使用value来接收这个值，然后我们在b组件中进行展示。但是在b组件里面进行修改value会报错，这种只是单向数据流，为此vue给我们提供了一个$emit，它可以帮助我们在子组件中暴露一个方法，将至传送到父组件中，然后在父组件中使用v-on定义一个函数接收这个值，但是还有一个新的方式就是使用.sync，上面我们收到它也是一个语法糖。
.sync
.sync也是一个语法糖，原本我们需要重新定义一个$emit事件暴露给父组件，但是.sync可以帮助我们省去这步操作：
<template>
<div>
<!-- <input type="text" v-modal="val"> -->
<!-- <input type="text" :value="val" @input="val=$event.target.value"> -->
<b v-modal.sync="val"></b>
</div>
</template>
<script>
import b from './a.vue'
export default{
name:"a",
components:{
b
},
data(){
return{
val:""
}
}
}
</script>
只需要在v-modal处加上.sync即可，它和这种写法并无二致：
<template>
<div>
<!-- <input type="text" v-modal="val"> -->
<!-- <input type="text" :value="val" @input="val=$event.target.value"> -->
<b v-modal="val" @update:a="value=>val = value"></b>
</div>
</template>
<script>
import b from './a.vue'
export default{
name:"a",
components:{
b
},
data(){
return{
val:""
}
}
}
</script>
这两个的语法的共同点就是都是语法糖，都能够实现数据双向绑定和组件之间的数据绑定，区别点就是写法不同和所依赖的不同，一个是$emit，一个是input事件。
