vue3封装dialog弹框组件父组件点击显示

首先，你需要在父组件中引入 Dialog 弹框组件，并在父组件的 template 中添加一个触发显示弹框的按钮。例如：

<template>
  <div>
    <button @click="showDialog">显示弹框</button>
    <Dialog v-model="dialogVisible"></Dialog>
  </div>
</template>

在上面的代码中，我们添加了一个按钮，当用户点击该按钮时，会触发 showDialog 方法。同时，我们引入了一个名为 Dialog 的组件，并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。

接下来，在父组件的 script 中，我们需要定义 showDialog 方法以及 dialogVisible 变量。例如：

<script>
import Dialog from './Dialog.vue'

export default {
  components: {
    Dialog
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

在上面的代码中，我们首先引入了 Dialog 组件，然后在 data 中定义了 dialogVisible 变量，并将其默认值设置为 false。接着，我们定义了一个名为 showDialog 的方法，该方法将 dialogVisible 设置为 true，从而显示 Dialog 弹框组件。

最后，我们需要在 Dialog 弹框组件中添加一个关闭按钮，并将其与 dialogVisible 变量绑定起来。例如：

<template>
  <div>
    <div class="dialog-mask" v-if="visible" @click="close"></div>
    <div class="dialog-wrapper" v-if="visible">
      <div class="dialog-content">
        <div class="dialog-header">
          <h3 class="dialog-title">Dialog 标题</h3>
          <button class="dialog-close-btn" @click="close">×</button>
        </div>
        <div class="dialog-body">
          <p>Dialog 内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

在上面的代码中，我们添加了一个名为 close 的方法，该方法会将 dialogVisible 设置为 false，并通过 $emit 方法将更新后的值传递给父组件。同时，我们在弹框组件中添加了一个关闭按钮，并在按钮的 click 事件中调用 close 方法。

这样，当用户点击父组件中的按钮时，就会触发 showDialog 方法，从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时，会触发 close 方法，从而关闭弹框。