vue2.0 在父组件内触发子组件的方法

最新推荐文章于 2025-07-11 17:56:16 发布

转载最新推荐文章于 2025-07-11 17:56:16 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yxmBetter/blog/1549008

文章标签：

#javascript #python #ViewUI

本文介绍如何在Vue项目中实现父组件调用子组件的方法来关闭弹窗，具体演示了使用Element UI框架时，如何通过自定义事件的方式进行父子组件间的交互。

2019独角兽企业重金招聘Python工程师标准>>>

vue2.0在父组件内调用子组件自定义的方法

情景：使用elemengui框架中，当有多个dialog弹出框时，需要在关闭父组件dialog弹出框前，先关闭子组件的弹出框

/*父组件：发送事件*/
<template>
<el-dialog :before-close="closeDialog">
    <child ref="childComponent"></child>
</el-dialog>
</template>
<script>
export default {
   data(){
    return {}
    },
    methods:{
        closeDialog(done){
            this.$refs.childComponent.$emit('closeDialogchild')
            done()
        }
    }
}
</script>
/*子组件关闭对话框：设置隐藏*/
<template>
<el-dialog :visible.sync="visibledialog">子组件</el-dialog>
</template>
<script>
export default {
   data(){
    return {
        visibledialog：‘true’
    }
    },
    mounted(){
        this.$on('closeDialogchild',()=>{
            this.visibledialog="false"
        })
    }
}
</script>