【Vue知识点总结】.sync修饰符

在 Vue.js 的组件化开发中，父子组件间的通信遵循“单向数据流”原则：父组件可以向子组件传递数据，但子组件不能直接修改从父组件接收到的 props。然而，在某些场景下，我们确实需要子组件能够通知父组件更新数据。.sync 修饰符就是Vue 2中为了简化这种需求而提供的一个语法糖，它能让子组件修改父组件传递的 props 值并同步更新到父组件。

一、什么是 .sync 修饰符？

.sync 修饰符是 Vue 2.3.0+ 新增的一个功能，用于实现父子组件之间的双向数据绑定的语法糖。它本质上是对“子组件触发 update:myPropName 事件，父组件监听并更新数据”这种模式的封装和简化。

核心原理：当你使用:propName.sync="value" 时，Vue 会在内部将其展开为：

<ChildComponent :propName="value" @update:propName="val => value = val" />

也就是说，.sync 做了两件事：

1. 将父组件的 value 值通过 :propName 传递给子组件。
2. 自动为子组件绑定一个名为 update:propName 的事件监