浅析 Vue的 .sync修饰符

Vue官网解释: .sync 修饰符

• 首先先看一下Vue的三条语法规则

  • 组件不能修改props外部数据
  • this.$emit可以触发事件，并传参
  • $event可以获取$emit的参数

• 接下来看个例子

场景描述： 父组件传了total(10000)给子组件，子组件每次点击按钮扣100

// 父组件
<template>
    <div>
        <div>我是父亲： 我有 {{ total }} 元</div>
        <Child :money="total" @update:money="total = $event"></Child>
    </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      total: 10000
    }
  }
}
</script>

// ======================================================================
// 子组件
<template>
    <div>
        <div>我是儿子： 我要花100块，爸爸有 {{ money }} 元</div>
        <button @click="$emit('update:money', money - 100)">点一下花100</button>
    </div>
</template>
<script>
export default {
  props: {
      money: [Number, String]
  }
}
</script>

上面的例子中

• 子组件每点一次按钮，就触发一个update:money事件，事件执行money - 100的操作，并把结果存在了$envent上面
• 父组件监听update:money，并把$envent赋值给total
• 这样子组件就完成了子组件修改父组件传过来的值

尤雨溪觉得既然每次都要写<Child :money="total" @update:money="total = $event"></Child>这么长，那就做个语法糖吧

• 使用 .sync

// 父组件,其他不变
<template> 
    <div> 
        <div>我是父亲： 我有 {{ total }} 元</div> 
        <Child :money.sync="total"></Child> 
    </div> 
</template>

这就和上面的代码意思是一样的，所以：

• :money.sync="total" 等价于 :money="total" @update:money="total = $event"
• .sync只是语法糖，缩写了父组件监听并赋值的写法