浅析vue 中的.sync修饰符

• 官方文档的介绍:vue .sync 修饰符。

• 根据文档可理解为：.sync修饰符可以实现子组件与父组件的双向绑定。是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

示例代码如下：

父组件

<template>
  <div class="app">
     {{dataApp}}
    <hr>
    <Child :money.sync="dataApp"/>
    // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
  </div>
</template>
<script>
 import Child from "./Child.vue";
 export default {
    data() {
      return { dataApp: 10000 };
  },
 components: { Child }
};
</script>

子组件

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>
<script>
 export default {
    props: ["money"]
};
</script>

例子中父组件将参数money传给子组件，子组件通过$emit触发更新事件

<button @click="$emit('update:money', money-100)">

父组件通过v-on监听子组件中的数据变化

.sync语法

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

v-on监听

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

注意这里 <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/>。