vue2 子父传参 子元素如果是个Dialog对话框 则点击x 如何关闭弹窗

在 Vue2 中，子组件可通过 `props` 接收父组件传递的数据。如果子组件是一个 Dialog 对话框，可以通过 `visible` 属性控制 Dialog 的显示与隐藏。当点击 Dialog 右上角的关闭按钮时，可以触发 `close` 事件来通知父组件关闭 Dialog。

以下是示例代码：

在父组件中：

<template>
  <div>
    <button @click="showDialog">显示Dialog</button>
    <my-dialog :visible="dialogVisible" @close="closeDialog"></my-dialog>
  </div>
</template>

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

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

在子组件中：

<template>
  <el-dialog :visible="visible" @close="close">
    <!-- Dialog 内容 -->
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

在子组件中，我们接收父组件传递的 `visible` 属性，并在 Dialog 上绑定该属性。当点击 Dialog 右上角的关闭按钮时，触发 `close` 事件，通过 `$emit` 方法通知父组件关闭 Dialog。在父组件中，我们监听 `close` 事件，将 `dialogVisible` 设置为 false，从而关闭 Dialog。