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

在Vue.js中，可以使用props传递父组件的数据到子组件，并使用v-model来创建一个双向绑定，从而控制子组件的显示和隐藏。

以下是一个简单的例子：

父组件 (ParentComponent.vue):

<template>
  <div>
    <el-button @click="dialogVisible = true">打开对话框</el-button>
    <child-dialog :visible.sync="dialogVisible" title="对话框标题">
      <!-- 对话框内容 -->
      这里是对话框的内容。
    </child-dialog>
  </div>
</template>
 
<script>
import ChildDialog from './ChildDialog.vue';
 
export default {
  components: {
    ChildDialog
  },
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

子组件 (ChildDialog.vue):

<template>
  <el-dialog :visible="visible" @update:visible="onVisibleChange">
    <template slot="title">{{ title }}</template>
    <slot></slot>
  </el-dialog>
</template>
 
<script>
export default {
  props: {
    visible: Boolean,
    title: String
  },
  methods: {
    onVisibleChange(newVisible) {
      this.$emit('update:visible', newVisible);
    }
  }
};
</script>

在这个例子中，父组件通过一个名为dialogVisible的数据属性控制对话框的显示。通过.sync修饰符,父组件可以确保子组件的visible属性反映了dialogVisible属性的变化，并且当子组件的对话框关闭时，dialogVisible也会相应地被设置为false。子组件通过监听update:visible事件来接收来自父组件的显示状态更新。