本篇非源码分析，只是一个Vue新手对.sync用法的总结，想看源码解释的同学可以不必往下看了。
什么时候会用到.sync修饰符？
答：当父子组件交互，当父组件通过props传值进子组件，子组件想要改变这个值时(一般直接修改会报错)，可以这么做：子组件触发事件，通知父组件改变这个绑定的值，用 .sync 修饰符简写。
举个例子🌰
假如有以下场景：小绿跟小红我最近涨工资了，可以请你吃三次饭，小红说好吧，那我想吃饭的时候给你打电话。
实现原理是：利用eventBus，在子组件中通过
$emit触发update事件并传参，然后父组件可以通过$event来接收$emit的参数。
- 父组件
<template>
<div class="app">
小绿 还有 {{total}} 次请吃饭
<hr>
<Child :lunch="total" v-on:update:lunch="total = $event"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 3 };
},
components: { Child: Child }
};
</script>
- 子组件
<template>
<div class="child">
{{lunch}}
<button @click="request">
<span>请吃饭</span>
</button>
</div>
</template>
<script>
export default {
props: ["lunch"],
methods: {
request(){
if(this.lunch > 0) {
this.$emit('update:lunch', this.lunch -1);
}else{
alert('不能再请了，没钱啦！！')
}
}
}
};
</script>
- 预览效果
-
.sync修饰符简写 父组件中的<Child :lunch="total" v-on:update:lunch="total = $event"/>可以简化为<Child :lunch.sync="total"/> -
推荐阅读
Vue官网：使用v-bind.sync
