vue3父组件调用子组件el-dialog对话框

在Vue 3中，父组件调用子组件el-dialog可以通过使用ref来实现。首先，需要在父组件中为el-dialog设置一个ref属性，然后在父组件的方法中通过this.$refs来访问子组件的实例并调用其方法。

以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <el-button @click="openDialog">打开对话框</el-button>
    <el-dialog ref="myDialog" title="提示">
      <span>这是一段信息</span>
    </el-dialog>
  </div>
</template>
 
<script>
import { ElButton, ElDialog } from 'element-plus';
 
export default {
  components: {
    ElButton,
    ElDialog
  },
  methods: {
    openDialog() {
      this.$refs.myDialog.open(); // 假设 el-dialog 组件有 open 方法
    }
  }
};
</script>

在这个例子中，当用户点击按钮时，会触发openDialog方法，该方法会调用el-dialog的open方法（假设el-dialog组件提供了这个方法），从而打开对话框。

请注意，这个例子假设el-dialog组件是从element-plus库中引入的，并且它有一个open方法用于打开对话框。实际上，Element Plus 的el-dialog组件本身就有visible属性来控制对话框的显示和隐藏，通常使用v-model来绑定一个布尔值来实现，而不是直接调用open方法。

父组件通过操作绑定到v-model的响应式数据来控制对话框的显示和隐藏，而不是直接调用子组件的方法。这是符合Vue.js推荐做法的实现方式。