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作为媒介,要相互通 ...
随机推荐
- python+selenium+PhantomJS爬取网页动态加载内容
一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...
- Play 2D games on Pixel running Android Nougat (N7.1.2) with Daydream View VR headset
- java读取excel文件的两种方式
方式一: 借用 package com.ij34.util; /** * @author Admin * @date 创建时间:2017年8月29日 下午2:07:59 * @version 1.0 ...
- mysql练习----Using Null
teacher id dept name phone mobile 101 1 Shrivell 2753 07986 555 1234 102 1 Throd 2754 07122 555 1920 ...
- mysql练习----SUM and COUNT/zh图（二）
世界国家概况 GROUP BY 和 HAVING 通过包括一个GROUP BY子句功能, SUM并将COUNT 其应用于共享值的项目组.当你指定 GROUP BY continent 结果是每个不同的 ...
- linux 命令之netstat
转自:http://www.maomao365.com/?p=699 linux 命令之netstat 在linux中netstat命令的作用是查看TCP/IP网络当前所开放端口,所对应的本地和外地端 ...
- Linux下1号进程的前世(kernel_init)今生(init进程)----Linux进程的管理与调度（六）
前面我们了解到了0号进程是系统所有进程的先祖, 它的进程描述符init_task是内核静态创建的, 而它在进行初始化的时候, 通过kernel_thread的方式创建了两个内核线程,分别是kernel ...
- ASP.NET -- WebForm -- HttpRequest类的方法和属性
ASP.NET -- WebForm -- HttpRequest类的方法和属性 1. HttpRequest类的方法(1) BinaryRead: 执行对当前输入流进行指定字节数的二进制读取. ( ...
- Alpha阶段 - 博客链接合集
Alpha阶段 - 博客链接合集 项目Github地址 安卓端(Stardust):https://github.com/StardustProject/Stardust 服务器端(Gravel):h ...
- jdk旧版本下载
如何找到旧版本的jdk: 1.去oracle官网关于下载jdk的这一板块,https://www.oracle.com/technetwork/java/javase/downloads/index. ...