vue中align_理解vue .sync修饰符

vue的.sync修饰符的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

下面是一个示例：

https://codesandbox.io/s/wandering-wind-6qk3o​codesandbox.io

子组件代码：

<!-- Child.vue -->
<template>
  <div id="child">
    <div class="change" v-if="show"></div>
    <button class="btn" @click="$emit('update:show', !show)">点我试试</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["show"]
};
</script>

<style>
#child {
  text-align: left;
  margin-top: 20px;
}
.change {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgb(55, 185, 218);
}
.btn {
  margin: 10px;
}
</style>

父组件代码：

<!-- App.vue -->
<template>
  <div id="app">
    <Child :show.sync="valueChild"/> <!-- A处 -->
    <Child :show="valueChild" @update:show="valueChild = $event"></Child> <!-- B处 -->
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "App",
  components: { Child },
  data() {
    return {
      valueChild: true
    };
  }
};
</script>

<style>
#app {
  text-align: left;
  margin: 10px;
}
</style>

说明：父组件中，A处和B处的代码效果相同，所以说.sync修饰符其实就是一个语法糖