vue Bus总线/发布订阅模式/观察者模式
时间:2019-02-21
本文章向大家介绍vue Bus总线/发布订阅模式/观察者模式,主要包括vue Bus总线/发布订阅模式/观察者模式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。
参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
例子:https://segmentfault.com/q/1010000007491994
<div id="app">
<c1></c1>
<c2></c2>
</div>
var Bus = new Vue(); //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js
Vue.component('c1',{ //这里已全局组件为例,同样,单文件组件和局部组件也同样适用
template:'<div>{{msg}}</div>',
data: () => ({
msg: 'Hello World!'
}),
created() {
Bus.$on('setMsg', content => {
this.msg = content;
});
}
});
Vue.component('c2',{
template: '<button @click="sendEvent">Say Hi</button>',
methods: {
sendEvent() {
Bus.$emit('setMsg', 'Hi Vue!');
}
}
});
var app= new Vue({
el:'#app'
})
在实际运用中,一般将Bus抽离出来:
Bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
组件调用时先引入
组件1
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
methods: {
....
Bus.$emit('log', 120)
},
}
组件2
import Bus from './Bus'
export default {
data() {
return {
.........
}
},
mounted () {
Bus.$on('log', content => {
console.log(content)
});
}
}
但这种引入方式,经过webpack打包后可能会出现Bus局部作用域的情况,即引用的是两个不同的Bus,导致不能正常通信
实际运用二(推荐):
当然也可以直接将Bus注入到Vue根对象中,
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
在子组件中通过this.$root.Bus.$emit(),this.$root.Bus.$on()来调用
- 关于Int自增字段和GUID字段的性能测试。只有测试,没有分析,呵呵
- 【自然框架】 之 资源角色——列表过滤方案(思路篇)
- UVM(七)之phase及objection
- 【自然框架】 之 主从表的添加、修改
- HLS Lesson6-数据类型转换
- 某开源框架从注入到Getshell
- HLS Lesson4-例子
- Docker初探(一)-有关docker的介绍和简单使用
- MySQL绕过WAF实战技巧
- 注意了,使用XSS平台的你可能被“偷窥”
- 挖洞经验 | 命令注入突破长度限制
- 预防SQL注入攻击之我见
- 企业网站架构之Nginx详解原理以及工作模块;源码Lnmp架构
- 【自然框架】——页面基类与设计模式(二) 模板模式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- AkShare-股票数据-破净股统计
- AkShare-股票数据-创新高和新低的股票数量
- AkShare-股票数据-A股个股市盈率、市净率和股息率
- AkShare-股票数据-A股市净率
- AkShare-股票数据-A股市盈率
- AkShare-期货数据-期货交易日历
- AkShare-另类数据-彭博亿万富豪指数
- AkShare-股票数据-券商业绩月报
- AkShare-期货数据-仓单日报-上海期货交易所
- AkShare-期货数据-仓单日报-大连商品交易所
- AkShare-期货数据-仓单日报
- AkShare-股票数据-美港目标价
- AkShare-Websocket-行情数据
- AkShare-股票-市场总貌
- AkShare-使用教程-R语言调用数据接口