Vue 子组件中触发父组件方法

Vue子父组件通信实践

最新推荐文章于 2025-02-22 09:53:25 发布

原创最新推荐文章于 2025-02-22 09:53:25 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue.js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种Vue.js应用程序中实现子组件向父组件传递数据的方法。具体展示了如何使用this.$emit触发父组件中的方法，并通过实例演示了删除确认对话框的实现过程。

父组件中：

<子组件名 @close="close"></子组件名>

methods: {
    close(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    }

子组件中：

<el-button size="mini" type="primary" @click="close('5')">关闭</el-button>

methods: {

close(id){
    this.$emit('close',id);
    console.log(id);
}

}子组件中通过this.$emit()触发父组件中方法