Vue兄弟组件间通信

最新推荐文章于 2025-04-27 16:17:33 发布

不秃头的小李同学

最新推荐文章于 2025-04-27 16:17:33 发布

阅读量521

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41767945/article/details/122604740

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用事件中心实现Vue中兄弟组件间的通信。通过创建事件中心，并利用$on监听事件，$emit触发事件，$off销毁事件的方式实现跨组件的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兄弟组件间通信通过事件中心的概念进行相关通信

在这里插入图片描述

1、创建事件中心
var hub = new Vue()
2、监听事件和销毁事件

hub.$on('eventName',functionEvent);//两个参数，一个事件名称，一个函数调用事件
hub.$off('eventName');
3、触发事件
hub.$emit('eventName');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>兄弟组件相互通信</title>

</head>

<body>
    <div id="app">
        <button-a></button-a>
        <button-b></button-b>
        <button-c></button-c>
    </div>
</body>
<script>
    // 创建事件中心
    var hub = new Vue();
    // 创建全局组件A
    Vue.component('button-a', {
        data: function() {
            return {
                name: '组件A: ',
                count: 0
            }
        },
        template: '<div><div style="cursor: pointer;" @click="handle">{{name}} {{count}}</div> <div> . </div> </div>',
        methods: {
            handle: function() {
                // 触发事件
                hub.$emit('component-b', 2);
            }
        },
        // 挂载完毕
        mounted: function() {
            // 添加监听事件和函数 要用箭头函数否则取不到值
            hub.$on('component-a', (value) => {
                this.count += value;
            });
        }
    });
    // 创建全局组件B
    Vue.component('button-b', {
        data: function() {
            return {
                name: '组件B:',
                count: 0
            }
        },
        template: '<div> <div style="cursor: pointer;" @click="handle">{{name}} {{count}}</div> </div>',
        methods: {
            handle: function() {
                // 触发事件
                hub.$emit('component-a', 2);
            }
        },
        // 挂载完毕
        mounted: function() {
            // 添加监听事件和函数 要用箭头函数否则取不到
            hub.$on('component-b', (value) => {
                this.count += value;
            });
        }
    });
    // 创建全局组件C
    Vue.component('button-c', {
        data: function() {

        },
        template: '<div> <input type="button" @click="deleteEvent" value="事件销毁" /> <div>',
        methods: {
            deleteEvent() {
                // 销毁事件
                hub.$off('component-a');
                hub.$off('component-b');
                alert("事件销毁成功！")
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })
</script>

</html>

<style>

</style>