Vue3组件同步更新 update 方法 和Vue2.sync的用法

有一篇文章我用到了这个update来向父组组件传参 那么这个是干啥的 ，其实通俗易懂一点 他就是用来同步更新父组件的值 不需要再用父组件来调用自定义事件 实例：

vue3版本

<template>
  <div class="">
    <p @click="open">请你点击</p>
    <zh-drag v-model:show="show" title="头部">
      <template #center> 中间 </template>
      <template #floor>
        <button @click="show = false">取消</button>
        <button @click="show = false">确定</button>
      </template>
    </zh-drag>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  setup() {
    let state = reactive({
      show: false,
    });
    let open = () => {
      state.show = true;
    };
    return {
      open,
      ...toRefs(state),
    };
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

注意我传组件的使用 用的是v-model:show=“show” 

而当你的子组件要改变父组件值的时候你就可以再子组件这个用update来传

这样你就会发现 你父组件并没有设置show的自定义事件  但是你父组件show的值却更新了 这就是同步更新的好处  不需要你再手动来添加自定义事件 

vue2

你只要给show来一个修饰符.sync 就可以

就可以 当然我这个是vue3 所以会报错  vue2不会 子组件一样用update来传  就可以达到同步更新 

感谢观看文章 祝你技术越来越good！！