在
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参数的值来进行相应的操作。
2131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
