Vue 中的 .sync 修饰符作用浅析

.sync 修饰符的介绍和使用可参考 .sync 修饰符官方文档

.sync修饰符作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

代码

<my-comp :foo.sync="bar"></my-comp>

会被扩展成

<comp :foo="bar" @update:foo="val => bar = val"></comp>

因此，sync的功能是：当一个子组件改变了一个 props 的值时，这个变化也会同步到父组件中所绑定。

如果组件想对外部props中的数据进行修改，该怎么做呢？有例子如下：

<template>
  <div class="app">
   我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money = "total=$event"/>   
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

组件代码如下：

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

其中$emit相当于eventBus，作用为触发事件并传参；而其父组件可以通过$event来获取其参数。

其中，

<Child :money="total" v-on:update:money = "total=$event"/>

等价于

<Child :money.sync = "total" />