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 ...
随机推荐
- SQL点点滴滴_特殊用法笔记
声明: 本文为转载,感谢原作者的辛勤付出. 原博客地址为:http://www.cnblogs.com/icyJ/p/SQL_Statement.html 1.MERGE用法:关联两表,有则改,无则加 ...
- 查询login什么时候过期
-- Show all logins where the password is over 60 days old --查看60天没改密码的login SELECT name, LOGINPROPER ...
- 面向对象进阶------>内置函数 str repr new call 方法
__new__方法: 我们来讲个非常非常重要的内置函数和init一样重要__new__其实在实例话对象的开始 是先继承父类中的new方法再执行init的 就好比你生孩子 先要把孩子生出来才能对孩子 ...
- python----------闭包 、装饰器
闭包: 就是内层函数对外层函数(非全局变量的)非全局变量的引用 def func(): name = '老人家' def func1(): print(name)#局部变量对全局变量的引用 因为并没有 ...
- Python初学者第二十天 函数（3）-递归函数及练习题
20day 1.递归的返回值: 递归返回值 2.递归的特性: a.必须有一个明确的结束条件 b.每次进入更深一层递归时,问题规模相比上次递归都应有所减少 c.递归效率不高,递归层次过多会导致栈溢出 3 ...
- Java实例---flappy-bird实例解析
第一天: 实现背景图片和小鸟的动态飞行效果 package com.ftl.flappybird.day2; import java.awt.Color;//颜色 Color.class import ...
- Exchange 2016证书配置
配置证书: 第一步,在ECP界面生成证书请求文件: 1.在“服务器 —>证书”界面,选择一台服务器,点击“+”来添加证书申请,如下图: 2.默认下一步, 3.填写证书的友好名称,如下图: 4.默 ...
- Strsafe.h：更安全的C语言字符串处理函数
原文出处:Strsafe.h: Safer String Handling in C 作者:Michael Howard 编译:王凌峰 在微软公司举行的Microsoft Windows Securi ...
- Oracle与EntityFramework(EF)的一些事情
概要 Oracle 和EF 一起用的时候总会有各种问题,这里总结一下解决办法. 模式 Schema 用过Oracle的人应该知道,其实Oracle的用户名一般就是它的模式名称,如果你在用databas ...
- php中的extract函数
extract函数用来将一个数字分解成多个变量直接使用,下面是W3C的解释:PHP extract() 函数从数组中把变量导入到当前的符号表中.对于数组中的每个元素,键名用于变量名,键值用于变量值.第 ...