.sync修饰符

官方对于.sync的说法

我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

作用

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
简单来说就是：用于实现父子组件数据的双向绑定 (语法糖)

// 父组件
<template>
  <div class="context">
  		<div>我的{{price}}</div>
    	<zi :price.sync="price"/>
		
		//<zi :price="total" v-on:update:price="total = $event" />
    	//父组件这一大段代码太麻烦了，vue把它封装成了一个修饰符
    	//传给子组件一个money值,v-on是监听子组件的update:money事件，$event获取子组件事件的结果
  </div>
</template>

<script>
import zi from "./zi.vue";
export default {
  data() {
    return { 
    	price: 10000
    };
  },
  components: { zi: zi}
};
</script>

<style lang="less">
.context{
  border: 2px solid #f60;
  padding: 20px;
}
</style>

//子组件
<template>
  <div class="zi">
    <div>子{{price}}</div>
    <button @click="$emit('update:price', price - 100)">花钱</button>
  </div>
</template>

<script>
export default {
  props: ["price"]
};
</script>
<style lang="less">
.zi{
  border: 2px solid #abcdef;
}
</style>

这样子组件修改父组件同样接受并更新。
这里我们必须在事件执行名称前加上 'update：' 的前缀才能正确触发事件。
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。（官网摘抄）