vue的.sync使用

<!--
  sync只是一种父子组件沟通的方式
  如果我们只是在子组件中修改父组件中的某个数据时，建议使用sync
-->
<template>
  <div style="height: 1000px">
    <input type="button" value="我是父组件中的按钮,点我有惊喜" @click="show" />
    <base-checkbox v-show="isShow" :changeShow.sync="isShow" />
  </div>
</template>

<script>
import BaseCheckbox from "./Components/BaseCheckbox.vue";
export default {
  data() {
    return {
      isShow: false // 主要用于我们的 展示/隐藏
    };
  },
  components: {
    BaseCheckbox
  },
  methods: {
    show() {
      // 点击事件
      this.isShow = true;
    }
  }
};
</script>

<template>
  <div style="width: 300px;height: 300px;background: #0f0;">
    <button @click="changeShow">我是子组件的按钮,点我不绿</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeShow() {
      this.$emit("update:changeShow", false);
    }
  }
};
</script>