vue sync

理解： 普通的父子组件修改值只能通过父组件设立方法，子组件传值到父组件进行修改，但vue提供了更方便的修改方式sync，写法如下：

// 父组件
<template>
  <div class="about">
    <!-- 入参.sync写法 -->
    <child :num.sync="num" />
  </div>
</template>

<script>
import child from "./child";
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: { child },
};
</script>

// 子组件
<template>
  <div>
    <span>{{ num }}</span>
    <span @click="add">+</span>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    add() {
      const nums = this.num + 1;
      // 修改值 update: 写法 可直接进行修改值，无需父组件进行定义方法
      this.$emit("update:num", nums);
    },
  },
};
</script>

如无需修改值后的操作，可直接用此api进行操作，方便一步