Vue 非父子组件间的传值 (发布订阅模式 / 总线机制 / Bus /)

标签: 总线机制  发布订阅模式  非父子组件间传值

案例1:
在这里插入图片描述
假设第二层的一个组件想和第一层的大组件进行通信,这用到前面学的父子组件传值问题:
父组件通过props向子组件传值,子组件通过事件触发向父组件传值

案例2:
在这里插入图片描述
假设第三层的组件想和大组件进行通信,这时候该如何实现呢?
下面这种通信又改如何实现?
在这里插入图片描述
这就需要 非父子组件传值 来实现了

非父子组件传值

也称为发布订阅模式 / 总线机制 / Bus / 观察者模式

先看实现效果:
在这里插入图片描述
鼠标点击 Tony ,下面的组件Dove也变成了 Tony:
在这里插入图片描述

同理,鼠标点击组件2 Dove,那上面的组件 Tony 就会变成 Dove
在这里插入图片描述
这样就实现了兄弟组件之间的通信

代码实现:

<body>

    <div id='root'>
        <child content="Tony"></child>
        <child content="Dove"></child>
    </div>

    <script>
        /*
        在Vue类的原型上挂一个bus属性 这个属性指向了一个Vue的实例  
                只要我们后面创建 new Vue 或创建组件  每一个组件上就都会有 bus这个属性
                因为这里每一个组件或Vue的实例 都是通过Vue这个类来创建的 而之前我们在Vue的类上挂载了一个bus属性
       
        每一个通过类创建的对象(Vue的实例)都会有bus这个属性,且都指向同一个Vue的实例
        
        */
        Vue.prototype.bus=new Vue();

        Vue.component('child',{
            data:function(){
                return {
                    slefContent:this.content
                }
            }
            ,
            props:{
                content:String  
            },

            template:'<div @click="handleClick">{{slefContent}}</div>',
            methods: {
                // 子组件的methods里面 定义 handleClick方法
                handleClick:function(){

                    /*
                    点击组件1   把组件1的内容 传给 组件2
                        this.bus指的就是 当前Vue实例上挂载的那个bus属性
                    */
                    this.bus.$emit('change',this.slefContent);
                }
            },
            //mounted---组件被挂载的时候会执行的函数 
            mounted:function(){
                var this_= this;

                //bus是一个Vue的实例,所以bus上就也有$on这个方法
                //因此他就能监听到bus上面触发出来的事件
                this.bus.$on('change',function(msg){
                    this_.slefContent = msg;
                });

            }
        });

        /*
        在一个组件里面触发事件的时候,两个组件都进行了同一个组件的监听
        所以两个child组件都会弹出msg
        */

        var vm =new Vue({
            el:'#root' 
              
        })
    </script>
</body>
版权声明:本文为qq_37767455原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37767455/article/details/102491810

智能推荐

说说 Python Django 应用的基础目录结构

通过以下 django-admin 指令创建应用之后,就会生成应用的基础目录结构。 比如,我们建立了一个叫 ‘first’ 的应用,它的目录结构是这样的: 目录或文件 说明 最外层的 first/ 这是新应用的根目录,所有与该应用相关的内容都放在这里。 manage.py 用于管理 Django 项目的命令行工具。 里面一层的 first/ 目录 是一个...

Springboot整合rabbitMQ

依赖: 配置文件application.yml RabbitConfig 消息生产者RabbitProducer 消息消费者RabbitCustomer 通过Controller进行调用 启动项目后调用接口: 结果:...

Thread.join()方法的使用

如果一个线程A执行了thread.join()语句,代表当前线程A等待thread线程终止后才从thread.join()方法返回 并且这个方法具有超时特性,可以添加参数设置 输出结果: jdk中Thread.join()方法的源码(进行了部门调整)   每个线程终止的条件是前驱线程的终止,每个线程等待前驱线程终止后,才从join()方法返回,  当线程终止时,会调用自身的no...

linux服务器部署jenkins笔记

安装jenkins参考文档:https://blog.csdn.net/tomatocc/article/details/83930714 1. 打开jenkins官网:https://jenkins.io/download/ 将war包下载到本地 **ps:**这里要注意的是要下载左边下方的war包,不要下载右边下面的war包。左边是稳定版本,右边是最新版本,建议大家使用稳定版本(我刚开始下载的...

k8s部署elasticsearch集群

百度营销大学     环境准备 我们使用的k8s和ceph环境见: https://blog.51cto.com/leejia/2495558 https://blog.51cto.com/leejia/2499684 ECK简介 Elastic Cloud on Kubernetes,这是一款基于 Kubernetes Operator 模式的新型编排产品,用户可使用该产品在...

猜你喜欢

saas-export项目-AdminLTE介绍与入门

AdminLTE介绍 (1)AdminLTE是什么? AdminLTE是一款建立在bootstrap和jquery之上的开源的模板主题工具 (2)AdminLTE有什么特点? 提供一系列响应的、可重复使用的组件, 并内置了多个模板页面 自适应多种屏幕分辨率,兼容PC和移动端 快速的创建一个响应式的Html5网站 AdminLTE 不但美观, 而且可以免去写很大CSS与JS的工作量 AdminLTE...

MyBatis中ResultMap结果集映射

用于解决属性名和字段名不一致的情况: resultMap 元素是 MyBatis 中最重要最强大的元素。...

编写一个shell

编写shell的过程: 1.从标准输入中读入一个字符串。 2.解析字符串 3.创建一个子进程的执行程序。 4.子进程程序替换。 5.父进程等待子进程退出。...

WEB自动化测试中Xpath定位方法

前言: Xpath是在XML文档中查找信息的一种语言,使用路径表达式来选取XML文档中的节点或节点集,由于XML与HTML结构类似(前者用于传输数据,后者用于显示数据),所以Xpath也常用于查找HTML文档中的节点或节点集。 一  路径表达式: 路径以“/”开始     表示找到满足该绝对路径的元素; 路径以//”开始  ...

力扣困难难度 第4题 寻找两个正序数组的中位数

先看一眼题 我的思路: 设置下标i,j分别用于遍历两个数组,初始值均为0,直到找到两个数组中从小到大的第第length/2个数为止结束循环,length为两个数组长度之和。 ·每次比较nums[i]nums[j],如果前者小则i++,否则j++ ·循环结束时,如果count已经达到length/2,则说明已经找到了中位数,[注意:此时有可能正好其中一个数组遍历完了!所以...