Vue之.sync 修饰符

.sync 基本原理

.sync 修饰符可以实现父组件和子组件之间的双向绑定，当子组件修改了一个 props 的值时，也会同步到父组件中，实现子组件同步修改父组件。

代码示例

通俗来讲，.sync就是子传父的一种方法，接下来通过代码实例进行更详细的讲解。

父组件

<template>
  <div>
    父组件：{{ n }}

    // 这两句代码实现功能等价
    // props 传值+ 事件监听方法
    <Hello :number="n" @update:data="n = $event"></Hello>
    // .sync方法
    <Hello :number.sync="n"></Hello>
  </div>
</template>


<script>
import Hello from "@/components/Hello";

export default {
  data() {
    return {
      n: 0
    }
  },

  components: {
    Hello
  },
}
</script>

子组件

<template>
  <div>
    子组件：{{ number }}
    <button @click="$emit('update:data',number+=1)">+1</button>
  </div>
</template>


<script>
export default {
  props:['number']
}
</script>

数据传递

• 父组件可以使用 props 把数据传给子组件
  当我们从父组件向子组件传送数据时，在父组件 script 标签中通过 import 方式导入接受数据的子组件，再以 components 定义组件，将其放在父组件的 template 中，通过在子组件标签中以 :number="n" 的方式进行动态绑定，之后在子组件文件中，定义props:['number']，再将其输出在子组件的 template 里，从而实现父组件向子组件传送数据。

• 子组件可以使用 $emit 触发父组件的自定义事件
  当从子组件向父组件传送数据变化时，我们首先在子组件中绑定导致数据发生变化的事件，并通过$emit(event,arg)的方式将数据发送给父组件，并在父组件中子组件标签中通过自定义绑定事件 event 进行监听接收，从而实现子组件同步修改父组件。
  通过Vue提供的方法，在子传父的过程中，我们在父组件中，也可以不使用event，而是使用.sync方法，通过为变化的数据number添加.sync，从实现父组件数据的接受，即 <Hello :number="n" @update:data="n = $event"> 的功能等价于 <Hello :number.sync="n">