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作为媒介,要相互通 ...
随机推荐
- Linux Linux下最大文件描述符设置
Linux下最大文件描述符设置 by:授客 QQ:1033553122 1. 系统可打开最大文件描述符设置 查看系统可打开最大文件描述符 # cat /proc/sys/fs/file-max 6 ...
- WebStorm File Watchers配置将.less文件编译后的.css输出至指定目录
Arguments:其实是命令行输入“lessc file.less file.css”后者指定路径 Output Paths to refresh:刷新changed后.css文件
- Android内存优化（二）解析Memory Monitor、Allocation Tracker和Heap Dump
前言 要想做好内存优化工作,就要掌握两大部分的知识,一部分是知道并理解内存优化相关的原理,另一部分就是善于运用内存分析的工具.本篇就来介绍内存分析工具:Memory Monitor.Allocatio ...
- Linux 进程后台运行的几种方式 screen
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/80580779 本文出自[赵彦军的博客] screen是Linux窗口管理器,用户可 ...
- recovery 升级前兼容性检查(Vendor Interface Object)
从android P(9.0)版本开始,我们发现编译出来的OTA升级了里面多了一个文件,compatibility.zip,这个里面存储这system与vendor分区的一些特性,用来做升级前的兼容性 ...
- Spring从认识到细化了解
目录 Spring的介绍 基本运行环境搭建 IoC 介绍: 示例使用: 使用说明: 使用注意: Bean的实例化方式 Bean的作用范围的配置: 补充: DI: 属性注入: 补充: IoC的注解方式: ...
- Struts2.5学习笔记----org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter报错
Struts2.3升级到struts2.5后报错 <filter> <filter-name>struts2</filter-name> <filter-cl ...
- C#-事件（十八）
概述 事件(Event) 基本上说是一个用户操作,如按键.点击.鼠标移动 使用事件,可以很方便地确定程序执行顺序 事件在类中声明且生成,且通过使用同一个类或其他类中的委托与事件处理程序关联 包含事件的 ...
- IOS UIWebView用法
转自猫猫小屋 IOS webview控件使用简介(一) IOS webview控件使用简介(二)–加载本地html
- Oracl数据库+PL/SQL安装与配置
资源位置:百度网盘/Oracle+PL/SQL 一.Oracle安装与配置 Oracle 11g 最好安装在Win7上,Win10会有各种不兼容问题. 先安装Oracle数据库,database数据库 ...