第一步：先用一句话解释
.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
第二步：具体解释
一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 emit。其中，父组件通过props将值传给子组件，子组件再通过emit 。 其中，父组件通过 props 将值传给子组件，子组件再通过 emit。其中，父组件通过props将值传给子组件，子组件再通过emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。 如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖。
第三步：举一个例子来说明
Father.vue <template> <div class="app"> {{dataApp}} <hr> <Child :money.sync="dataApp"/> // <Child :money="dataApp" v-on:update:money="dataApp = $event"/> //两句作用等同 </div> </template> <script> import Child from "./Child.vue"; export default { data() { return { dataApp: 10000 }; }, components: { Child } }; </script> Child.vue <template> <div class="child"> {{money}} <button @click="$emit('update:money', money-100)"> </button> </div> </template> <script> export default { props: ["money"] }; </script>
上面例子中，父组件传了一个参数 money 给子组件，
子组件通过$emit修改 money 后，将值同步到父组件。 这里
<Child :money="dataApp" v-on:update:money="dataApp = $event"/>
就相当于
<Child :money.sync="dataApp"/>
再举个例子
父组件：
<template> <div id="FatherCom"> <h4>我是父组件</h4> <div v-show="show">我是在隐藏与现实中飘忽不定的</div> <hr> <ChildCom :show="show" @update:show="update_show"/> </div> </template> <script> import ChildCom from './ChildCom' export default { name: 'FatherCom', components: { ChildCom }, data() { return { show: true } }, methods: { update_show(val) { this.show = val } } } </script> <style scoped> </style>
子组件
<template> <div id="FatherCom"> <h4>我是父组件</h4> <div v-show="show">能看得见我吗？</div> <hr> <ChildCom :show="show" @update:show="update_show"/> </div> </template> <script> import ChildCom from './ChildCom' export default { name: 'FatherCom', components: { ChildCom }, data() { return { show: true } }, methods: { update_show(val) { this.show = val } } } </script> <style scoped> </style>
可以通过 .sync修饰符简化父组件的代码：
在子组件内触发的事件名要以 update:myPropName 方式命名(尤雨溪要求的)，
父组件 :show:show 加上.sync修饰符， 即 :show.sync:show
这样设置父组件就不再需要单独再去绑定@update:show事件了 。
<template> <div id="FatherCom"> <h4>我是父组件</h4> <div v-show="show">能看得见我吗？</div> <hr> <!--<ChildCom :show="show" @update:show="update_show"/>--> <ChildCom :show.sync="show" /> </div> </template>
handle(){ // 这里要求用 `update:myPropName` 方式命名 this.$emit('update:show',!this.show)
