vue学习（十三）发布订阅通讯

忘是亡心i 2022-04-18 00:14 70阅读 0赞

1，参考例子，非父子组件之间的通讯  ，两个child组件之间通过bus总线来完成

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;child content="hello"&gt;&lt;/child&gt;
        &lt;child content="world"&gt;&lt;/child&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.prototype.bus=new Vue();
        Vue.component('child',{
            data:function () {
                return {
                    selfContent:this.content
                }
            },
            props:{
                content:String
            },
            template:'&lt;div @click="handleclick"&gt;{
       {selfContent}}&lt;/div&gt;',
            methods:{
                handleclick:function () {
                   this.bus.$emit('change',this.selfContent)
                }
            },
            mounted:function () {
                var that=this;
                this.bus.$on('change',function (msg) {
                    that.selfContent=msg
                })
            }
        })
        var app=new Vue({
            el:"#app",
            data:{
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关十三： redis--发布订阅模式使用及场景

十三： redis–发布订阅模式使用及场景发布订阅模式一般用来做广播，发布者发送消息到指定的通道，订阅者订阅指定的通道，当发布者发送了新的消息，订阅者可以马上收到

逃离我推掉我的手/ 2023年02月18日 14:11/ 0 赞/ 19 阅读

相关 redis学习之发布订阅

redis发布订阅： redis发布订阅（pub/sub）是一种消息通信模式：发送者(pub)发送消息，订阅者(sub)接收消息。 redis客户端可以订阅任意数量的频

淡淡的烟草味﹌/ 2022年12月26日 02:26/ 0 赞/ 162 阅读

相关【SpringBoot】三十六、SpringBoot整合Redis实现发布/订阅

一、简介 1、发布订阅 SUBSCRIBE, UNSUBSCRIBE 和 PUBLISH 实现了发布/订阅消息范例，发送者 (publishers)

痛定思痛。/ 2022年12月17日 08:54/ 0 赞/ 244 阅读

相关 NodeMCU学习（十一）--MQTT的订阅与发布

NodeMCU实现订阅和发布主题。 1、要点扫盲 1.1 MQTT [《MQTT协议--MQTT协议简介及原理》 ][MQTT_--MQTT] [《MQ

电玩女神/ 2022年10月26日 03:46/ 0 赞/ 344 阅读

相关 RabbitMQ （三）发布/订阅

转发请标明出处：[http://blog.csdn.net/lmj623565791/article/details/37657225][http_blog.csdn.net_

以你之姓@/ 2022年08月23日 09:55/ 0 赞/ 190 阅读

相关 RabbitMQ （三）发布/订阅

转发请标明出处：[http://blog.csdn.net/lmj623565791/article/details/37657225][http_blog.csdn.net_

桃扇骨/ 2022年07月15日 03:19/ 0 赞/ 207 阅读

相关 Redis系列~发布订阅（十一）

Redis 发布订阅(pub/sub)是一种消息通信模式：发送者(pub)发送消息，订阅者(sub)接收消息。 Redis 客户端可以订阅任意数量的频道。下图展示了频道

川长思鸟来/ 2022年07月15日 01:12/ 0 赞/ 129 阅读

相关 Redis系列~发布订阅（十一）

Redis 发布订阅(pub/sub)是一种消息通信模式：发送者(pub)发送消息，订阅者(sub)接收消息。 Redis 客户端可以订阅任意数量的频道。下图展示了频道

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:12/ 0 赞/ 151 阅读

相关十一、Redis发布订阅功能

\ Redis发布订阅功能 \\\1、发布订阅角色 ![这里写图片描述][70] \\\2、发布订阅模型 !

r囧r小猫/ 2022年05月16日 01:09/ 0 赞/ 199 阅读

相关 vue学习（十三）发布订阅通讯

1，参考例子，非父子组件之间的通讯，两个child组件之间通过bus总线来完成 <table> <tbody> <tr> <td> <pre><code

忘是亡心i/ 2022年04月18日 00:14/ 0 赞/ 71 阅读