Vue 的 .sync 和 v-model

在这里想说一说 Vue 给我们使用的两块语法糖，.sync 修饰符 和 v-model 指令

一、.sync 修饰符

子组件通过 props 收到来自父组件传递的值，当子组件想通知父组件值发生变化时，使用 $emmit 事件，父组件通过 .sync 自动更新值

// 子组件
this.$emit('update:dateSource',[...this.dataSource,name]);
// 父组件
<Tags :data-source="tags" @update:dateSource="tags=$event"/>

父组件简写成

<Tags :data-source.sync="tags"/>

这块“语法糖”我使用失败了！！！

一、v-model

看 Vue 官方文档

_

input 标签中，

<label>
    <input v-model="message" placeholder="edit me">
</label>
<p>{{message}}</p>
data(){return{
        message:''
    }
}

它实际上是监听了标签的 input 事件中的 value，还原成以下方式效果是一样的

<input value="message" @input="message=$event.target.value" placeholder="edit me">

.lazy 修饰符可以转换为监听 change 事件，在 change 事件触发后进行同步

「@浪里淘沙的小法师」