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

智能推荐

bireme数据源同步工具--debezium+kafka+bireme

1、介绍 Bireme 是一个 Greenplum / HashData 数据仓库的增量同步工具。目前支持 MySQL、PostgreSQL 和 MongoDB 数据源 官方介绍文档:https://github.com/HashDataInc/bireme/blob/master/README_zh-cn.md 1、数据流 Bireme 采用 DELETE + COPY 的方式,将数据源的修改记...

一致性hash算法

散列(hash)在我看来就是一个数组,而与数组不同的点在于数组是按顺序写入的,而hash是按照一定的hash算法确定元素在数组中的位置的。hash最难的问题在于会有冲突出现,如果两个object根据相应的hash算法得出的值一样便产生了hash冲突。在所有解决hash冲突的方法中,我最欣赏的是链式解决法,即将hash到同一位置的元素用链表连接。当然还有其它几种处理hash冲突的算法,比如建立公共溢...

OpenCV-Python learning-1.安装,图片读取显示

1. OpenCV与OpenGL区别 https://www.zhihu.com/question/20212016 一个是让机器识别东西的,OpenCV是给电脑做眼睛的。 一个是让机器计算出更好画面的,OpenGL用在游戏渲染方面很多。 OpenCV(Open Source Computer Vision Library)是一个基于(开源)发行的跨平台计算机视觉库,OpenGL(全写Open G...

Mycat+Mysql分布式架构改造和性能压力测试

架构实现 Mycat作为数据库高可用中间件具备很多的功能,如负载均衡,分库分表,读写分离,故障迁移等。结合项目的实际情况,分库分表功能对于关联查询有很高的要求,需要从业务角度考虑分库分表后的关联查询SQL的分析,业务代码动作较大,所以在此方案中我们不考虑分库分表。主要应用Mycat的负载均衡及故障迁移的功能即可。 整个架构改造包括两个部分,第一是单例Mysql改为多个Mysql,同时负载均衡,并且...

人脸识别之疲劳检测(二)阈值法、KNN分类和K-means聚类

Table of Contents 1、均值法 2、中值法 3、KNN 4、K-means 结合上一节在获得人眼特征点后需要对睁眼闭眼状态做出判断,方法的选择需要经验结合公平的评价方法,使用大量测试集得到不同方法下的精确度并做出比较: 1、均值法 50帧睁眼数据取均值,得到不同阈值下精确度。 2、中值法 50帧睁眼数据取中值,得到不同阈值下精确度。 3、KNN KNN是一种ML常用分类算法,通过测...

猜你喜欢

CodeForce Tic-Tac-Toe

Two bears are playing tic-tac-toe via mail. It's boring for them to play usual tic-tac-toe game, so they are a playing modified version of this game. Here are its rules. The game is played on the foll...

Python雾里看花-抽象类ABC (abstract base class)

首先认识模块 abc,python中没有提供抽象类与抽象方法,然而提供了内置模块abc来模拟实现抽象类,例如提供泛映射类型的抽象类 abc.MutableMapping 继承abc.MutableMapping构造一个泛映射类型(类似python中的dict) 当然继承abc.Mapping 也可以,毕竟MutableMapping是其子类 dict是python中典型的映射类型数据结构,其接口的...

python 文件操作

2, with open (‘xx.txt’,‘w’,encoding=‘utf-8’) as f: f.write(‘文件内容或对象’)...

【Python基础】使用统计函数绘制简单图形

机器学习算法与自然语言处理出品 @公众号原创专栏作者 冯夏冲 学校 | 哈工大SCIR实验室在读博士生 2.1 函数bar 用于绘制柱状图 2.2 函数barh 用于绘制条形图 2.3 函数hist 用于绘制直方图 直方图与柱状图的区别 函数pie 用于绘制饼图 2.5 函数polor 用于绘制极线图 极线图是在极坐标系上绘出的一种图。在极坐标系中,要确定一个点,需要指明这个点距原点的角...

css:顶部按钮固定,上面内容滑动

这种需求我们平时见到很多的,实现方法也多的参差不齐,下面我说一种简单的。如图: 可以看到只有红线部分滚动,底下按钮是固定的。 代码...