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

在 Vue2 中，可以通过 props 将父组件中的数据传递给子组件，从而实现子父组件之间的传参。

对于关闭弹窗的实现，可以在子组件中定义一个方法，该方法可以通过 $emit 方法将事件传递给父组件。在父组件中监听该事件，并更新数据，从而实现关闭弹窗的效果。

具体实现可以参考以下代码：

父组件：

<template>
  <div>
    <button @click="openDialog">打开对话框</button>
    <dialog-component :visible="dialogVisible" @close="closeDialog"></dialog-component>
  </div>
</template>
<script>
import DialogComponent from "./DialogComponent";

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

子组件：

<template>
  <div v-if="visible">
    <div>这是一个对话框</div>
    <button @click="closeDialog">X</button>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    closeDialog() {
      this.$emit("close");
    },
  },
};
</script>

在上述代码中，父组件通过 props 将 dialogVisible 传递给子组件 DialogComponent，子组件通过 $emit 方法将 close 事件传递给父组件，父组件监听该事件，并更新 dialogVisible 数据，从而实现关闭对话框的效果。