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作为媒介,要相互通 ...
随机推荐
- 冒泡排序算法的C++实现
直接上代码: #include <iostream> using namespace std; void BubbleSort(int arr[],int n){ ) //在本例中,第1次 ...
- java内存分配与垃圾回收
JVM的内存分配主要基于两种,堆和栈. 我们来看一下java程序运行时候的内存分配策略: 1):静态存储区(方法区): 2):栈区: 3):堆区: 1):主要存放静态数据,全局static数据和常量. ...
- C# 加密术
本文是利用一个简单的小例子,简述C#中和加密术有关的内容,仅供学习参考用. 概述 随着信息技术的发展,计算机网络为信息的获取.传输.处理.利用与共享提供了一个高效.快捷.安全的通信环境和传输通道,网络 ...
- 前端AntD框架的upload组件上传图片时遇到的一些坑
前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...
- SQL Server中通用数据库角色权限处理
SQL Server中通用数据库角色权限处理 最近和同事在做数据库权限清理的事情,主要是删除一些账号:取消一些账号的较大的权限等,例如,有一些有db_owner权限,我们取消账号的数据库角色db_ ...
- NLog简单使用
一.安装 二.安装后会在根目录出现NLog.config配置文件,简单修改配置文件为写入文件记录日志: <?xml version="1.0" encoding=" ...
- c/c++ 图的创建(二维数组法）
c/c++ 图的创建(二维数组法) 图的概念 图由点和线组成 知道了图中有多少个点,和哪些点之间有线,就可以把一张图描绘出来 点之间的线,分有方向和无方向 创建图 创建图,实际就是创建出节点,和节点之 ...
- Python 标示符和关键字
标示符 开发人员在程序中自定义的一些符号和名称.标示符是自己定义的,如变量名 .函数名等 标示符的规则 标示符由字母.下划线和数字组成,且数字不能开头 注:python中的标识符是区分大小写的 命 ...
- monkey_recorder录制monkeyrunner脚本
转载:monkey_recorder录制monkeyrunner脚本 1. 你必须有android sdk, sdk的tools文件家里有一个monkeyrunner.bat.2. 将如下内容拷贝 ...
- LeetCode算法题-First Unique Character in a String（Java实现）
这是悦乐书的第213次更新,第226篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第81题(顺位题号是387).给定一个字符串,找到它中的第一个非重复字符并返回它的索引. ...