Vue-发布订阅机制（bus)实现非父子组件的传值
1.把Vue.prototype上挂载一个bus属性，这个属性指向1个vue实例，
以后创建组件的时候，每个组件上都会有bus这个属性，都指向同一个实例
Vue.prototype.bus = new Vue();
2.发布
在methods里使用 this.bus.$emit 发布广播
methods:{
broadcast: function() {
this.bus.$emit('change', this.selfContent);//发布change事件并且携带参数
}
3.订阅
在mounted里使用this.bus.$on 订阅事件
mounted: function () {
var _this = this;
this.bus.$on('change', function (msg) { //订阅change事件
_this.selfContent = msg;
}
)
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<child :content="'全部变成第1项内容'"></child>
<child :content="'全部变成第2项内容'"></child>
</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script
<!-- 把Vue.prototype上挂载一个bus属性，这个属性指向1个vue实例，
以后创建组件的时候，每个组件上都会有bus这个属性，都指向同一个实例 -->
Vue.prototype.bus=new Vue();
Vue.component('child',{
props:['content'],
template:"<div @click='handleClick'>{{selfContent}}</div>",
data:function(){
return {
selfContent:this.content
}
},
methods:{
handleClick:function(){
//本组件向外触发change，并携带值
this.bus.$emit('change',this.content);
}
},
mounted:function(){
var this_=this
//其它组件监听change，并取得值
//两个child的组件都对change进行了监听
this.bus.$on('change',function(msg){
console.log('change');
this_.selfContent=msg;
})
}
})
var app=new Vue({
el:'#app',
})
</script>
</html>
Vue-发布订阅机制（bus)实现非父子组件的传值的更多相关文章
- Vue父子，子父，非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- 封装事件订阅来进行非父子组件的传值(React)
const list={} // 将事件名和事件函数装进事件池里 function $on(name,func) { if(!name || !func) return; if(!Object.key ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 组件基础（非父子组件传值）—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- Vue组件传值，父传子，子传父，非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
随机推荐
- iOS开发GCD(3)-数据安全
/* 多个线程可能访问同一块资源,造成数据错乱和数据安全问题 为代码添加同步锁(互斥锁) */ -(void)synchronized{ @synchronized(self){ //需要锁住的代码, ...
- (网页)html中页面传递参数不用cookie不用缓存,js方法搞定
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...
- 作为IT，你的价值在哪里？
也许最近是真的被无穷无尽的数据整理.导入.再整理.再导入给恶心到了. 业务部提交的数据只是一个非常初始的数据,IT还得在这个基础上七整八整,对导出的结果还要再做二次导入三次导入,不仅要帮业务部批导生成 ...
- Orchard详解--第九篇 拓展模块及引用的处理
在分析Orchard的模块加载之前,先简要说一下因为Orchard中的模块并不是都被根(启动)项目所引用的,所以当Orchard需要加载一个模块时首先需要保证该模块所依赖的其它程序集能够被找到,那么才 ...
- DataTable表头对不齐、添加参数等方法总结
tableData: 一:写这篇博客是因为我在网上找到了改变行颜色,没有找到改变td颜色的改变文章,也许好多朋友早就找到了或感觉这个太简单,但不管怎样我还是写下了这篇没有技术含量的一篇. 前提:引入依 ...
- 使用Visual Studio Team Services敏捷规划和项目组合管理（三）——使用Kanban板
使用Visual Studio Team Services敏捷规划和项目组合管理(三)--使用Kanban板 1.要查看Kanban板,请单击Work>Backlogs页面上的Board 链接. ...
- web前端（7）—— 了解CSS样式，引入css样式的方式
CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...
- Sql Full-Text Filter
SQL Server 全文索引介绍(转载) 概述 全文引擎使用全文索引中的信息来编译可快速搜索表中的特定词或词组的全文查询.全文索引将有关重要的词及其位置的信息存储在数据库表的一列或多列中.全文索引是 ...
- Python PEP-8编码风格指南中文版
#PEP 8 – Python编码风格指南 PEP: 8 Title: Style Guide for Python Code Author: Guido van Rossum , Barry War ...
- Windows安装paramiko和PyCharm工程导入
借鉴了CSDN博主Liam_Fang的paramiko安装 原文链接:https://blog.csdn.net/weixin_39912556/article/details/80543829 前提 ...