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 ...
随机推荐
- 听说是个集成版的监控,不知道你听过没? C+C+N
Cnyunwei-Cacti+Nagios 下载地址1:http://pan.baidu.com/s/1mgn1rsc 下载地址2:http://sourceforge.net/projects/cn ...
- Struts 2 官方文档中文版
最近正在学 Struts 2 ,咱英文水平不行啊,找到了<Struts 2 官方文档中文版>,虽然翻译的不全,有总比没有强. 地址:https://cwiki.apache.org/con ...
- Windows Azure系列公开课 - 第三课：创建虚拟机 (基础篇)
Windows Azure微软智能云平台主要提供四大类服务:计算服务(Compute),数据服务 (Data Services) ,应用服务 (App Services) ,网络服务(Network) ...
- course & time
- 一、Asp.Net Core WebAPI——修改默认监听端口
参考文档 添加host.json文件 { "urls": "https://localhost:44389;http://localhost:44380" } ...
- 配置Sharepoint之后。外网无法访问的问题
Sharepoint配置完成了,projectserver也已经配置完毕.突然遇到一个情况就是外网访问不了,这可麻烦了,费了半天事访问不了等于0啊.没办法,研究吧.在群里问了大神,终于解决了.现将解决 ...
- FDFDF
Linux(Centos)之安装Nginx及注意事项 1.Nginx的简单说明 a. Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,期初开发的目的 ...
- Linux学习---Linux安装ftp组件
1 安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@bogon ~]# yum -y install vsftpd 2 添 ...
- Mysql常用语句与函数（待续）
-- 查询语句select class from stu_info where sid=1000000102;select * from stu_info t where t.age=88; -- t ...
- oracle sql练习 菜鸟入门！
进入公司 ,首先是进行SQL培训 一下是针对oracle的emp与dept表进行的基础查询 --1.选择部门30中的所有员工: ; --2.列出所有办事员(CLERK)的姓名,编号和部门编号: sel ...