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

最新推荐文章于 2024-05-29 14:40:07 发布
最新推荐文章于 2024-05-29 14:40:07 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37746973/article/details/82699257
版权

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>

 

huyao_road
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-非父子组件间传值
weixin_45497246的博客
05-13 315
非父子组件间传值主要通过两种方式： vuex（一般用于大项目，耦合度很高，需要大量的储存一些 data，组件之间通信频繁。） bus 通过 一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。 ...
Vue 发布订阅模式
Seric_xiao的博客
09-23 2826
发布订阅模式：订阅者，发布者，信号中心 我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心"发布"(publish)一个信号，其它任务可以向信号中心“订阅”(subscribe)这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern) 家长向学生所在的班级订阅了获取学生考试成绩的事件，当老师公布学生的成绩后，就会自动通知学生的家长。 在整个案例中，学生所在的班级为信号中心，老师为发布者，家长为订阅者 Vue 的自定义事
Vue发布订阅模式实现过程图解
10-15
主要介绍了Vue发布订阅模式实现过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
前端Vue之发布订阅模式
weixin_44178497的博客
12-26 3728
前端vue之发布订阅模式
发布-订阅者模式 VueJS使用
最新发布
gusensen的博客
05-29 343
在VueJS中自定义封装一个实现“发布订阅者模式 ”事件总线对象
vue发布订阅者模式$emit、$on
记录点滴
07-21 2448
家住南京的李先生，最近看上了一套房子，到了售楼处才发现，该楼盘放在早已售罄。好在售楼处工作人员王女士出于好心告知李先生，不久之后还会有一些尾盘推出，开发商在办理相关手续，手续办理好之后便可购买。但到底什么时候能办理好，目前无人知道。于是李先生记下了售楼处电话，每天都会打电话询问是否到了购买时间。除了李先生，还有它的朋友、七大姑八大姨也会每天定点咨询这个问题。一周之后，售楼处王女士决定辞职，...
从Vue层面 - 解析发布订阅模式和观察者模式区别
铁锤妹妹的博客
07-26 2918
观察者模式和发布订阅模式作为日常开发中经常使用到的模式，我一直不能做到很好的区分。最近在看Vue的源码，里面设计到了观察者模式，比较感兴趣，就去学习了下，这里做个总结吧。
Vue中的发布订阅模式
AlgorithmHero的博客
08-12 993
在 Vue 中，“发布订阅模式” 通常指的是 Vue 实例之间或者组件之间通过事件系统进行通信的一种设计模式。Vue 使用了发布订阅模式来解耦组件之间的通信，使得不同组件可以在不直接引用彼此的情况下进行通信。这种通信方式可以通过 Vue 的内置事件系统来实现。通过这种方式，你可以在不直接修改父子组件关系或引入全局变量的情况下，实现组件之间的通信。在这个示例中，子组件 A 通过 $emit 发送消息，子组件 B 通过 $on 监听消息，当消息被发送时，子组件 B 接收并显示消息内容。
Vue非父子组件之间传值
01-08
这里介绍的就是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）来解决这个问题。 首先，创建一个全局的事件总线，通常是在Vue实例的原型链上添加一个属性，这样所有组件都能访问到它。代码如下： ```...
vue 组件间的通信之子组件向父组件传值的方式
10-15
3. **中央事件总线（Event Bus）**：当组件之间没有直接的父子关系时，可以创建一个全局的Vue实例作为事件中心，通过`$on`订阅事件，`$emit`发布事件来传递数据。这通常是一个简化的Vuex解决方案，适用于简单的应用...
vue组件传值的实现方式小结【三种方式】
10-15
在Vue中，有多种方式实现组件间的值传递，主要包括：父传子、子传父以及非父子组件之间的通信。下面我们将详细介绍这三种方式。 1. 父传子 父组件向子组件传递数据时，主要使用`props`特性。在子组件中声明`props`...
vue 中几种传值方法(3种)
10-16
本篇将详细介绍三种Vue中的传值方法，包括父组件向子组件传值、子组件向父组件传值以及非父子组件间通过EventBus和Vuex插件进行传值。 首先，来看父组件向子组件传值的方法。在Vue中，父组件向子组件传值的机制是...
【JavaScript源代码】详解从vue的组件传值着手观察者模式.docx
12-30
【JavaScript源代码】详解从vue的组件传值着手观察者模式 在JavaScript中，Vue框架是一种广泛应用的前端开发工具，其核心设计思想包含了观察者模式的元素。观察者模式是一种软件设计模式，它定义了对象间的一种一对...
vue 发布订阅者模式
nickelLove的博客
04-10 743
EventBus 是一个 Vue.js 实例，可以在任何组件中使用 $emit() 方法发布事件，也可以使用 $on() 方法订阅事件。除了 $emit() 和 $on() 方法，EventBus 还提供了其它方法来管理事件，例如 $off() 方法可以取消订阅事件，$once() 方法可以订阅一次性事件等等。总之，Vue.js 的发布订阅者模式是一个非常强大的工具，可以让不同的组件之间进行松散耦合的通信，提高应用程序的可维护性和扩展性。
vue进阶-消息的订阅与发布
weixin_40017062的博客
07-13 2289
pubsub消息发布订阅适用于任何组件间通信，非常好用
Vue消息订阅与发布
m0_67685218的博客
05-13 356
概念：消息订阅与发布的设计思想可以理解为人类社会中的报纸订阅与发布，报纸订阅社先发布报纸，由人类的订阅者接收报纸的原理，整个任务分为订阅者和发布者，A组件想要接收B组件的消息内容，那么A组件此时的角色为订阅者，B组件为消息发布者，A组件订阅者需要提前订阅消息名称以及消息回调接收B组件的消息内容，方法为Pubsub.subscribe，向B组件发送订阅消息，B组件发布消息方法为Pubsub.publish，消息方法名必须一致，以下传递学生姓名案例。2、School组件创建订阅者消息。
vue发布订阅者模式(观察者模式)
qq_48546536的博客
04-17 333
Vue数据响应式系统总体来说分为两步：1、劫持数据；2、将数据改变要触发的回调函数与数据关联起来。observe 函数的功能就是劫持数据，让数据在被读取时收集依赖，在改变时触发依赖。如果数据为纯对象，则将其属性转变成访问器属性；如果数据是数组类型，则通过重写能够改变自身的方法来实现。对象添加、删除属性以及数组通过直接赋值的方式改变并不会触发依赖，这时要使用 Vue.set()、Vue.delete() 方法来操作。Dep 函数是用来生成盛放依赖的容器。
Vue响应式原理探究之“发布-订阅”模式
weixin_42296161的博客
08-26 3237
在面试题中经常会出现与“发布订阅”模式相关的题目，比如考察我们对Vue响应式的理解，也会有题目直接考验我们对“发布订阅”模式或者观察者模式的理解，甚至还会有一些手写算法题。笔者就在今年三月参加某安全公司的面试时被要求手写代码实现“发布订阅”模式，当时由于没有准备没有回答上来，悔不该当初。由此可见“发布订阅”模式是一个非常重要的设计模式，接下来我们一起学习下吧。...
一图看懂 Vue 订阅发布模式
hongtoushan的博客
01-05 446
在线浏览图片如果看不清的话，建议下载下来放大看！
父子组件间传值方式
05-30
在 Vue 中，父子组件之间传值可以使用 props 和 emit 两种方式。 1. props：父组件通过 props 属性向子组件传递数据，子组件通过 props 来接收数据。具体而言，可以在子组件中声明 props，然后在父组件中使用 v-bind 来绑定数据。例如： ```html <!-- 父组件 --> <template> <child-component :message="parentMessage"></child-component> </template> <!-- 子组件 --> <template> <div>{{ message }}</div> </template> <script> export default { props: { message: String } } </script> ``` 2. emit：子组件通过 emit 方法向父组件发送事件，并传递数据。父组件可以通过 v-on 来监听子组件发送的事件，并接收数据。具体而言，可以在子组件中使用 $emit 方法来发送事件，然后在父组件中使用 v-on 来监听事件。例如： ```html <!-- 父组件 --> <template> <div> <child-component @my-event="handleChildEvent"></child-component> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' } }, methods: { handleChildEvent(data) { this.message = data } } } </script> <!-- 子组件 --> <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('my-event', 'hello from child') } } } </script> ``` 以上两种方式都可以用于父子组件之间的传值，具体使用哪种方式，需要根据具体场景来选择。如果是单向数据流，建议使用 props；如果是需要在子组件中触发事件，建议使用 emit。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值