Back
Featured image of post 理解 Vue.js 中的 .sync

理解 Vue.js 中的 .sync

.sync 是什么

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。

—— Vue 官方文档

从官方文档不难看出,.sync 的双向绑定其实不是真正的双向绑定,他只是一个语法糖,会被扩展为一个自动更新父组件属性的 v-on 监听器。

实例

App.vue

<template>
  我有 {{ value }} 块钱
  <Button :value.sync = "number" />
  <Button :value = "number" v-on:update:value = "number = $event" />
</template>

<script>
  data(){
    return {
      number: 1
    }
  }
</script>

Button.vue

<template>
  <button @click="$emit('update:value', value - 100)">点击花 100 块<button/>
</template>

<script>
  props:['value']
</script>

以上两种 Input 组件写法等价。

由于 Vue 不允许子组件修改父组件的 props,但是我们又需要进行这种操作,那怎么办呢?

于是当子组件触发需要修改 props 的事件时,子组件会传递一个更新事件给父组件,并且可以携带参数,父组件由此事件来进行修改自身的 props。.sync 实际上就是它的语法糖。