vue3子组件修改父组件的值后传回父组件

// 在Vue3中，子组件修改父组件的值后传回父组件的方法如下所示：

// 父组件
<template>
  <ChildComponent :dialogShow="dialogShow" @update:dialogShow="updateDialogShow" />
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const dialogShow = ref(false);

    const updateDialogShow = (value) => {
      dialogShow.value = value;    };

    return {
      dialogShow,
      updateDialogShow,
    };
  },
};
</script>

// 子组件
<template>
  <button @click="updateParentDialogShow">Update Parent Dialog Show</button>
</template>

<script>
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  props: {
    dialogShow: Boolean,
  },
  emits: ['update:dialogShow'],
  setup(props, { emit }) {
    const { dialogShow } = toRefs(props);

    const updateParentDialogShow = () => {
      emit('update:dialogShow', !dialogShow.value);
    };

    return {
      updateParentDialogShow,
    };
  },
});
</script>