修饰符 .sync 的作用：

• .sync 修饰符的作用就是实现父子组件数据的双向绑定，简化功能逻辑代码 。当然，v-model 也是可以实现数据的双向绑定，但是，一个组件只有一个 v-model，所以 ， v-model 只能针对一个变量进行数据绑定，而 .sync 修饰符可以实现多个参数的数据双向绑定。
• 在对一个 prop 进行“双向绑定,单向修改”的场景下，因为子组件不能直接修改父组件，.sync 在2.3版本引入，作为一个事件绑定语法糖，利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。

vue2中使用.sync

父组件数据传入子组件中后更新

在父组件中传入数据到子组件中后，然后在子组件中处理了后，需要改变父组件数组的时候，我们一般会使用 $emit传递一个事件更新给父组件，父组件再对原来传入的数据进行更新修改。
比如，我们在父组件中使用一个模态框组件，如下：

// 父组件
<template><div id="app"><button @click="openModal">打开模态框</button><!-- 以下三种方法都可，我一般用的第一种 --><!-- 使用方法事件处理器 --><MyModal :isShow="isShow" @closeModal="closeModal" /><!-- 使用$event变量 --><MyModal :isShow="isShow" @closeModal="isShow = $event" /><!-- 使用内联事件处理器 --><MyModal :isShow="isShow" @closeModal="(val) => isShow = val" /></div>
</template><script>
import MyModal from './components/MyModal.vue'export default {name: 'App',components: {MyModal},data() {return {isShow: false}},methods: {openModal() {this.isShow = true},closeModal(val) {this.isShow = val}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>// 模态框组件
<template><div v-if="isShow"><h1>我是模态框</h1><button @click="closeModal">关闭模态框</button></div>
</template><script>export default {props: ['isShow'],methods: {closeModal() {this.$emit('closeModal', false)}}
}
</script>

优化1

我们对上述代码进行一些优化，将父组件的 @closeModal 改为 @update:isShow 同时，将 $emit 方法更新为 update:isShow。
代码如下：

// 父组件
<template><div id="app"><button @click="openModal">打开模态框</button><!-- 使用方法事件处理器 --><!-- <MyModal :isShow="isShow" @closeModal="closeModal" /> --><!-- 使用$event变量 --><!-- <MyModal :isShow="isShow" @closeModal="isShow = $event" /> --><!-- 使用内联事件处理器 --><!-- <MyModal :isShow="isShow" @closeModal="(val) => isShow = val" /> --><MyModal :isShow="isShow" @update:isShow="(val) => isShow = val" /><MyModal :isShow="isShow" @update:isShow="isShow = $event" /><MyModal :isShow="isShow" @update:isShow="closeModal" /></div>
</template><script>
import MyModal from './components/MyModal.vue'export default {name: 'App',components: {MyModal},data() {return {isShow: false}},methods: {openModal() {this.isShow = true},closeModal(val) {this.isShow = val}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>// 模态框组件
<template><div v-if="isShow"><h1>我是模态框</h1><button @click="closeModal">关闭模态框</button></div>
</template><script>export default {props: ['isShow'],methods: {closeModal() {// this.$emit('closeModal', false)this.$emit('update:isShow', false)}}
}
</script>

优化2

将父组件 :isShow="isShow" 加上 .sync ，变成 :isShow.sync="isShow"，.sync 如果用一句话来说就是同步更新了子组件的数据变化，而从实现的角度来说就是 .sync 就是@update:isShow="closeModal" 的语法糖，是一种简写的形式。
代码如下：

// 父组件
<template><div id="app"><button @click="openModal">打开模态框</button><!-- 使用方法事件处理器 --><!-- <MyModal :isShow="isShow" @closeModal="closeModal" /> --><!-- 使用$event变量 --><!-- <MyModal :isShow="isShow" @closeModal="isShow = $event" /> --><!-- 使用内联事件处理器 --><!-- <MyModal :isShow="isShow" @closeModal="(val) => isShow = val" /> --><!-- <MyModal :isShow="isShow" @update:isShow="(val) => isShow = val" /><MyModal :isShow="isShow" @update:isShow="isShow = $event" /><MyModal :isShow="isShow" @update:isShow="closeModal" /> -->// 改的就这一句，其他都一样，模态框组件代码不用变<MyModal :isShow.sync="isShow" /></div>
</template>
...

总结，对比优化1和优化2，你只需掌握优化2即可。

vue3中移除了.sync使用 v-mode:xxx代替了

• 注意不写v-model后的xx属性是不生效的，毕竟这并不是真正的v-model
  代码如下：

// 父组件
<template><!-- .sync修饰符在vue3.0版本已弃用，应该使用v-model:xxx --><MyDemo v-model:msg="msg" />
</template><script setup name="App">
import { ref } from 'vue'
import MyDemo from './components/MyDemo'const msg = ref('hello')
</script><style>
</style>// 子组件
<script setup>
defineProps(['msg'])
defineEmits(['update:msg'])
</script><template><h1>{{ msg }}</h1><button @click="emit('update:msg', '数据改变了')">changeMsg</button>
</template><style></style>

欢迎评论区一起讨论呀~