vue父组件监听子组件，关闭子组件页面

在 Vue 中，父组件可以通过 `ref` 属性获取到子组件的实例，然后就可以通过子组件实例上的方法或属性来操作子组件了。

假设子组件是一个弹窗组件，那么可以在父组件中监听子组件的某个事件（如关闭事件），然后调用子组件的方法来关闭弹窗。

下面是一个示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="showDialog">打开弹窗</button>
    <dialog ref="dialog"></dialog>
  </div>
</template>

<script>
import Dialog from './Dialog.vue'

export default {
  components: {
    Dialog
  },
  methods: {
    showDialog() {
      this.$refs.dialog.open() // 调用子组件的方法打开弹窗
    },
    closeDialog() {
      this.$refs.dialog.close() // 调用子组件的方法关闭弹窗
    }
  },
  mounted() {
    // 监听子组件的关闭事件
    this.$refs.dialog.$on('close', () => {
      this.closeDialog()
    })
  }
}
</script>

在子组件中，可以通过 `$emit` 方法触发事件，从而通知父组件做出相应的处理。例如，当点击弹窗的关闭按钮时，可以触发一个 `close` 事件，让父组件调用关闭弹窗的方法。

下面是子组件的示例代码：

<!-- 子组件 -->
<template>
  <div v-if="visible">
    <div class="dialog-mask"></div>
    <div class="dialog-content">
      <div class="dialog-header">
        <h3>{{ title }}</h3>
        <button @click="close">关闭</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.$emit('close') // 触发关闭事件
    }
  }
}
</script>