在main.js或者app.vue 中怎么监听

在main.js或者App.vue中监听el-dialog组件的事件同样可以通过绑定visible-change事件来实现。

在main.js中，您可以在Vue实例的created或mounted钩子函数中，通过$on方法来监听事件。具体实现代码如下：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$bus = new Vue() // 在Vue原型上定义$bus事件总线

new Vue({
  el: '#app',
  render: h => h(App),
  created() {
    this.$bus.$on('dialog-visibility-change', visible => {
      console.log(`el-dialog的可见性发生变化，当前可见性为: ${visible}`)
      // 在这里可以执行您想要的操作，比如发送请求、更新数据等
    })
  }
})

在上述代码中，我们通过在Vue原型上定义事件总线$bus，来实现在Vue实例中监听事件的功能。在created或mounted钩子函数中，我们通过$on方法来监听名为'dialog-visibility-change'的事件。在事件回调函数中，我们可以根据visible参数的值来进行相应的操作。

在App.vue中，您可以直接在<template>中绑定事件，也可以在<script>中通过$on方法来监听事件。具体实现代码如下：

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @visible-change="handleVisibleChange"
    >
      <span>这是一段内容</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.dialog.$on('visible-change', visible => {
        console.log(`el-dialog的可见性发生变化，当前可见性为: ${visible}`)
        // 在这里可以执行您想要的操作，比如发送请求、更新数据等
      })
    })
  },
  methods: {
    handleVisibleChange(visible) {
      this.$emit('dialog-visibility-change', visible)
    }
  }
}
</script>

在上述代码中，我们在<template>中为el-dialog组件绑定了visible-change事件，并通过handleVisibleChange方法来触发'dialog-visibility-change'事件。在mounted钩子函数中，我们通过$on方法来监听'refs.dialog'引用的el-dialog组件的'visible-change'事件。在事件回调函数中，我们可以根据visible参数的值来进行相应的操作。