Vue 全解：.sync 修饰符

• Vue 规定：在子组件中，不可以直接修改 props 外部数据。
  • 但是我们常有在子组件中修改 props 的值并同步到父组件的需求，要实现这个需求，可以使用 JS 的发布、订阅功能(EventBus)。
  • 看一个简单的例子： 在子组件 child 中，修改父组件 father 中的 n 的值

   // child.vue
   <tamplate>
       <div>
           {{compData}}
           <br />
           <button @click="$emit('update:compData', compdata + 1)">n + 1</button>
       </div>
   </tamplate>
   
   <script>
       export default {
           props: ["compData"]
       }
   </script>
复制代码

    // father.vue
    <tamplate>
        <div>
            父组件的 n：{{n}}
            <br />
            <Child :compData.sync="n"/>
            <!-- 扩展为：
            <Child :compData="n" @update:compData="n = $event"/>
            --> 
        </div>
    </tamplate>
    <script>
        import Child from './child.vue'
        export default {
            data(){
                return {
                    n: 100
                }
            },
            components: {Child}
        }
    <script>
复制代码

• Vue 封装了 EventBus
  • 使用 $emit 定义并触发事件，并传参；事件名应为：update:被监听的数据名
  • 使用 $event 来获取其他组件中 $emit 的参数
• 以上，修饰符 .sync 就是通过 $event 获取其他组件中 $emit 参数这一操作的简写，是一个语法糖