vue使用发布&订阅模式再非父子组件间传值

最新推荐文章于 2025-06-17 14:38:27 发布

原创最新推荐文章于 2025-06-17 14:38:27 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍在Vue中如何通过广播方式实现非父子组件间的传值。具体包括在Vue原型上挂载实例、定义发布者与订阅者方法，以及如何在组件中使用$emit和$on实现事件的发布与订阅。

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

Vue中可以通过广播的方式进行非父子组件间传值，具体方法如下

第一，在Vue的原型上挂载一个Vue实例。

Vue.prototype.bus = new Vue();

在methods中定义发布者方法

使用 this.bus.$emit 发布广播

methods:{
    broadcast: function() { //广播
        this.bus.$emit('change', this.selfContent);
    }
}

在mounted中定义订阅者方法

使用 this.bus.$on 订阅事件

mounted: function () {   //订阅
    var _this = this;
    this.bus.$on('change', function (msg) {    //订阅change事件
        _this.selfContent = msg;
    })
}

完整代码

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

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值（Bus总线 / 发布订阅模式 / 观察者模式）</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
    <h1>点击一个组件，他将改变其他组件（非父子关系）的内容</h1>
    <div id="app">
        <child :content="first"></child>
        <child :content="second"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue();
        Vue.component('child', {
            props: ['content'],
            data: function () {
                return {
                    selfContent: this.content
                }
            },
            template: '<div @click="broadcast">{{selfContent}}</div>',
            methods: {
                broadcast: function () {//广播
                    this.bus.$emit('change', this.selfContent);
                }
            },
            mounted: function () {   //接受
                var _this = this;
                this.bus.$on('change', function (msg) {
                    _this.selfContent = msg;
                })
            },
        });
        var vm = new Vue({
            el: '#app',
            data: {
                first: "Hu",
                second: "Yao"
            }
        })
    </script>
</body>

</html>