vue3中子组件的给父组件传参，并且控制父组件中对话框的开关

在Vue 3中，你可以通过使用自定义事件和props属性来实现子组件向父组件传递参数，并控制父组件中的对话框开关。

首先，在子组件中定义一个props属性来接收要传递给父组件的参数。例如，你可以在子组件中定义一个名为`dialogVisible`的props属性来表示对话框的可见性：

<template>
  <div>
    <!-- 子组件内容 -->
    <button @click="openDialog">打开对话框</button>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: Boolean
  },
  methods: {
    openDialog() {
      // 点击按钮时，将dialogVisible设置为true，通知父组件打开对话框
      this.$emit('update:dialogVisible', true);
    }
  }
}
</script>

然后，在父组件中使用子组件，并传递参数和监听事件。使用`v-model`指令可以方便地实现双向绑定：

<template>
  <div>
    <!-- 父组件内容 -->
    <button @click="closeDialog">关闭对话框</button>
    <child-component v-model:dialogVisible="dialogVisible"></child-component>
    <dialog v-if="dialogVisible"></dialog>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

在父组件中，可以通过修改`dialogVisible`的值来控制对话框的显示与隐藏。子组件中的点击事件将会通过`$emit`方法触发`update:dialogVisible`事件，从而通知父组件更新`dialogVisible`的值，实现父子组件之间的参数传递和状态控制。