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作为媒介,要相互通 ...
随机推荐
- Android 滑动定位+吸附悬停效果实现
在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接: Android 实现锚点定位 Android t ...
- Android IPC机制（三）使用AIDL实现跨进程方法调用
上一篇文章中我们介绍了使用Messenger来进行进程间通信的方法,但是我们能发现Messenger是以串行的方式来处理客户端发来的信息,如果有大量的消息发到服务端,服务端仍然一个一个的处理再响应客户 ...
- leetcode-14最长公共前缀
leetcode-14最长公共前缀 题目 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower& ...
- 关于最新笔记本机型预装win8如何更换为win7的解决办法
关于最新笔记本机型预装win8如何更换为win7的解决办法 目前新出的很多机型出厂自带的都是win8系统,可能有些人用不习惯,想更换为win7系统,但是由于这些机型主板都采用UEFI这种接口(硬盘分区 ...
- 使用Visual Studio Team Services持续集成（一）——构建ASP.NET Core
使用Visual Studio Team Services持续集成(一)--构建ASP.NET Core 概述 持续集成(CI)是将代码尽可能频繁地集成到共享仓库中的过程.在代码集成期间,构建中断或测 ...
- 修改主机时间对MySQL影响
背景 在装机实施时,BIOS忘记调整时间,导致服务器时间与CST不符合:待发现问题时,MySQL环境已经在运行,所以只能通过操作系统进行更改:但是更改完成后,MySQL进行重启时发生了问题.以下为问题 ...
- mysql Client does not support authentication protocol requested by server; consider upgrading MySQL
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';
- App分享之微信微博等各个社交平台的分享授权规则和常见问题
一.新浪微博分享规则 新浪微博支持分享类型: 应用内分享也就是网页分享支持: 文字,文字+图片,要分享链接需要链接添加在text里分享 客户端分享支持:文字,图片,文字+图片,图片+文字+链接 参数说 ...
- iOS弹出UIViewController小视图
在TestViewController1中弹出TestViewController2 在TestViewController中点击按钮或者什么触发方法里面写入以下代码 TestViewControll ...
- Java序列化(含transient)
什么是序列化? 我们创建的对象只有在Java虚拟机保持运行时,才会存在于内存中.如果想要超出Java虚拟机的生命周期,就可以将对象序列化,将对象状态转换为字节序列,写入文件(或socket传输),后面 ...