使用Bus.js进行兄弟(非父子)组件通信
首先需要在任意地方添加一个bus.js;
在bus.js里面 写入下面信息
import Vue from 'vue'
export default new Vue;
在需要通信的组件都引入Bus.js
如果你的bus.js是自定义一个bus的文件那from后面就改成你的所放的位置
import Bus from './bus.js'
接下来就是要组件通信了
添加一个 触发 #emit的事件按钮
<template>
<div id="emit">
<button @click="bus">按钮</button>
</div>
</template> import Bus from './bus.js'
export default {
data() {
return {
message: ''"
}
}, methods: {
bus () {
Bus.$emit('msg', '我要传给兄弟组件们,你收到没有')
}
}
}
打开要和$emit通信的另外一个组件
在钩子函数中监听msg事件
<template>
<div id="on">
<p>{{message}}</p>
</div>
</template> import Bus from './bus.js'
export default {
data() {
return {
href: 'www.dddddd//d/d/d'
}
},
mounted() {
$("body").on("click",".router_itme",function(){
//发送方
})
}
}
打开要和$emit通信的另外一个组件 ,在钩子函数中监听msg事件
<template>
<div id="on">
<p>{{message}}</p>
</div>
</template> import Bus from './bus.js'
export default {
data() {
return {
href : ''
}
},
mounted(){
// this.href = location.href.split('#')[1]
// 接收传header组件传过来的路径
let self = this;
Bus.$on('hrefs', (e) => {
self.href = e.split('#')[1]
})
}
}
使用Bus.js进行兄弟(非父子)组件通信的更多相关文章
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue 组件 非父子组件通信
有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...
- 封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法
const eventList = {} const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eve ...
随机推荐
- 您好,前端使用https,后端使用https是会有冲突的情况,所以默认后端都是http 负载均衡即可管理证书,不需要在后端ECS上绑定证书。
您前端使用https,那么前端就是加密的,后端使用https就是会访问出现问题的,目前阿里云负载均衡默认的配置前端使用https,后端默认就是http,也是无法更改的. 前端使用https,目前只有一 ...
- python调用C++之pybind11入门(相互调用)
python调用C/C++有不少的方法,如boost.python, swig, ctypes, pybind11等,这些方法有繁有简,而pybind11的优点是对C++ 11支持很好,API比较简单 ...
- 【css a标签 鼠标悬浮时变手型】
<a href="#" style="cursor:pointer">
- docker 数据管理数据卷
1,数据卷 数据卷是一个可供容器使用特殊目录,他将主机操作系统目录直接映射容器 1,在容器内创建一个数据卷 在使用docker run命令的时候,使用-v标记就可以创建一个数据卷,多次重复使用-v可以 ...
- python 面向对象 私有属性
__init__构造函数 self.name = name # 属性, 实例变量,成员变量,字段 def sayhi()# 方法, 动态属性 私有属性不对外看到 前面加上__ class role() ...
- Web Services 平台元素SOAP、WSDL 、UDDI
Web Services 拥有三种基本的元素:SOAP.WSDL 以及 UDDI. 什么是 SOAP? SOAP 是一种使应用程序有能力通过 HTTP 交换信息的基于 XML 的简易协议.或者可以更简 ...
- 剑指offer-有序二维数组中的查找
在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. def Find(self, t ...
- 4.4 Routing -- Specifying A Route's Model
一.概述 应用程序中,templates被models支持.但是templates是如何知道它们应该显示哪个model呢? 例如,你有一个photos模板,它是如何知道它该呈现哪个model呢? 这就 ...
- http之工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端.HTTP协议采用了请求/响应模型.客户端向服务器发送一个请求报文,请求报文包含请求的方法.URL. ...
- BabelMap 10.0.0.3 汉化版已经发布
新的 BabelMap 在日前发布. 新版本增加了字符书签的管理功能,以及将窗口最小化到系统通知栏(时钟区域)的功能. 请点击主页左上角进入下载页面下载.