Element UI中el-dialog作为子组件如何由父组件控制显示/隐藏~

在Element UI中，el-dialog 组件可以通过 visible 属性来控制其显示或隐藏。你可以在父组件中控制这个属性来达到由父组件控制子组件显示隐藏的目的。

以下是一个简单的示例：

父组件 (Parent.vue):

<template>
  <div>
    <el-button @click="dialogVisible = true">打开对话框</el-button>
    <child-component :visible="dialogVisible"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <el-dialog title="提示" :visible="visible" @close="closeDialog">
    <!-- 对话框内容 -->
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

在这个例子中，父组件 Parent 维护一个名为 dialogVisible 的数据属性，它通过点击按钮设置为 true 来打开对话框。然后它通过 ChildComponent 的 visible 属性将状态传递给子组件。子组件 ChildComponent 接收 visible 属性并将其绑定到 el-dialog 的 visible 属性上。当对话框关闭时，子组件触发一个自定义事件 update:visible 来通知父组件关闭对话框。