vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线)
<body>
<div class="app">
<child content = "dell"></child> //这两个子组件之间可以互相传值
<child content = "lee"></child>
</div>
</body>
<script>
//每一个vue实例对象上都能访问到同一个vue实例
Vue.prototype.bus = new Vue()
Vue.component("child",{
template:' <div @click="handleClick">{{selfContent}}</div>',
data:function(){
return{
selfContent:this.content
}
},
props:{
content:{
type:String
}
},
methods:{
handleClick:function(){
console.log(this.selfContent)
//单击的时候 在第三方Vue实例上触发change事件并且将this.selfContent传递过去
this.bus.$emit('change',this.selfContent)
}
},
mounted:function(){
let this_ = this
//在页面元素渲染完成后 为第三方Vue实例 -- this.__proto__.bus 注册监听change事件
this.bus.$on('change',function(msg){
alert(0)
this_.selfContent = msg
})
}
})
const app = new Vue({
el:'.app'
})
vue bus方式解决非父子组件间的传值的更多相关文章
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- 非父子组件通过事件传值-vue
1.创建中央事件总线:额外的 new Vue()2.$emit 触发事件3.$on 监听事件 在使用组件的文件中: <template> <div> <x-test :b ...
- Angular 非父子组件间的service数据通信
完成思路:以service.ts(主题subject---订阅sbuscribe模式)为数据中转中间件,通过sku.ts的数据更改监测机制,同步更改service.ts中的数据,同时buy.ts组件实 ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
随机推荐
- (Stanford CS224d) Deep Learning and NLP课程笔记（三）：GloVe与模型的评估
本节课继续讲授word2vec模型的算法细节,并介绍了一种新的基于共现矩阵的词向量模型--GloVe模型.最后,本节课重点介绍了word2vec模型评估的两种方式. Skip-gram模型 上节课,我 ...
- 路飞学城知识点3缓存知识点之一Djang自带的缓存
缓存是暂时把数据放到哪儿的意思,用于提高查询的访问速度用的,mysql等关系型数据库通常用作备份,数据库进行增删改操作一段时间内存同步到缓存(非关系型数据库中) 缓存与内存的区别: 通常把数据放到内存 ...
- ubuntu下面解压tar.gz包报错：tar命令报错： gzip: stdin: not in gzip format tar: Child returned status 1 tar: Error
原因: 压缩包文件不完整(损坏或者其他原因) 比如今天下载的tomcat8,使用ubuntu的命令下载的 curl -O http://apache.mirrors.ionfish.org/tomca ...
- 一次线上bug引起的反思
今天线上又出现了一个bug,而且代码是我写的.之前这个问题也出现过,不过由于每次情况都不同,改来改去总是改不完.之后领导知道后也很恼火,让测试把每种情况都测试了下,而我也又一次重新检查了下代码.当时确 ...
- maven(11)-聚合多模块
聚合项目 一些开源项目,都会把自己的源代码公开到github之类的网站上,我们通过下载其代码,在本地执行maven install,可以把代码编译成jar包安装到本地仓库.而一个项目通常有 ...
- Frequently Used Algo
1. 链表 链表逆转 class Solution { public: ListNode* reverseList(ListNode* head) { ListNode* prev = NULL; w ...
- Delphi IDHTTP用法详解
一.IDHTTP的基本用法 IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等 IDHttp的创建,需要引入 ...
- laravel controller重写
<?php namespace Boss\Http\Controllers; use Illuminate\Foundation\Bus\DispatchesJobs; use Illumina ...
- console 程序随系统启动及隐藏当前程序窗口
应业务需求,程序需要与系统启动而自动运行,故加入以下代码,保存成 .bat文件 ,双击执行即可 reg add "HKEY_CURRENT_USER\Software\Microsoft\W ...
- [EffectiveC++]item13：Use objects to manage resources（RAII）
baidu百科 RAII 百科名片 RAII,也称为“资源获取就是初始化”,是c++等编程语言常用的管理资源.避免内存泄露的方法.它保证在任何情况下,使用对象时先构造对象,最后析构对象. 目录 RAI ...