vue非父子关系之间通信传值
第一种方法:
通过给vue实例添加自定义属性
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>非父子组件传值(bus)</title>
<script src="js/vue.js"></script>
</head> <body>
<div id="app">
<child :msg="first"></child>
<child1 :msg="last"></child1>
</div> <script> /*
* Vue.prototype.busb为自定义的属性 可以是a,b也可以c,d等等
* */
Vue.prototype.bus=new Vue(); var child={
template:"<div @click='brother'>{{message}}</div>",
data(){
return{
message:this.msg
}
},
props:{
msg:String
},
methods:{
brother(){
this.bus.$emit("change",this.message)
}
},
mounted(){
var _this=this;
this.bus.$on("change1",function(info){
alert(_this.message+info)
})
}
}
var child1={
template:"<div @click='brother1'>{{message}}</div>",
data(){
return{
message:this.msg
}
},
props:{
msg:String
},
methods:{
brother1(){
this.bus.$emit("change1",this.message)
}
},
mounted(){
var _this=this;
this.bus.$on("change",function(info){
alert(_this.message+info)
})
}
} var app=new Vue({
el:"#app",
data:{
first:"张三",
last:"李四"
},
components:{
child:child,
child1:child1
}, }) </script> </body> </html>
第二种方法:eventHub
在公共组件创建vue实例,一般都在app.Vue的data里定义eventHub:new Vue(),然后通过provide抛出,其他组件通过inject注入eventHub,然后分别通过evenHub.emit与eventHub.$on触发与监听
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>非父子组件传值2(eventHub)</title>
<script src="js/vue.js"></script>
</head> <body>
<div id="app">
<button @click="getRandom">Send a message to the child component</button>
<one></one>
</div> <script> var two={
template:"<div>{{twoInfo}}</div>",
data(){
return {
twoInfo:""
}
},
inject:['eventHub'],
created(){
var _this=this;
this.eventHub.$on("send",function(msg){
_this.twoInfo=msg;
})
}
}
var one={
template:"<div>{{oneInfo}}<two></two></div>",
inject:['eventHub'],
data(){
return{
oneInfo:""
}
},
created(){
var _this=this;
this.eventHub.$on("send",function(msg){
_this.oneInfo=msg;
})
},
components:{
two:two
} };
var app=new Vue({
el:"#app",
data:{
eventHub:new Vue()
},
provide(){
return {
eventHub:this.eventHub
}
},
components:{
one:one
},
methods:{
getRandom(){
this.eventHub.$emit("send", Math.random())
}
} }) </script> </body> </html>
以上代码为本地,不需要node启服务之类的,运行需要下载vue.js文件,修改你的src路径即可!
vue非父子关系之间通信传值的更多相关文章
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
随机推荐
- Python面向对象-继承和多态特性
继承 在面向对象的程序设计中,当我们定义一个class时候,可以从现有的class继承,新的class成为子类,被继承的class称为基类,父类或超类. 比如,编写一个名为Animal的class: ...
- 墨者 - X-FORWARDED-FOR注入漏洞实战
X-FORWARDED-FOR 首先,X-Forwarded-For 是一个 HTTP 扩展头部.HTTP/1.1(RFC 2616)协议并没有对它的定义,它最开始是由 Squid 这个缓存代理软件引 ...
- zabbix服务深入
第1章 Grafana自定义图形 1.安装grafana [root@m01 /data/soft]# wget https://dl.grafana.com/oss/release/grafana- ...
- sqlserver日志处理不当而造成的隐患
sqlserver日志处理不当而造成的隐患 事故背景:一大早还在路上,群里陆续有人反馈系统一直报错 “Unknown error 258”,后来查询日志发现错误日志 第一反应是不是数据库连接不够用了? ...
- Linux 版本控制工具之rabbitvcs
原文地址:http://www.robotshell.com/2017/11/04/Linux-%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6%E5%B7%A5%E5%85% ...
- Leetcode547: Friend Circles 朋友圈问题
问题描述 在一个班级里有N个同学, 有些同学是朋友,有些不是.他们之间的友谊是可以传递的比如A和B是朋友,B和C是朋友,那么A和C也是朋友.我们定义 friend circle为由直接或者间接都是朋友 ...
- 【数据库】SQLite3的安装
版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ SQLite3的安装 离线安装 SQLite3安装包 下载SQLite3安装包,将文件 ...
- 【重要更新】Senparc.Weixin SDK v6.5 升级说明（支持 .NET Core 3.0 及分布式消息上下文）
Senparc.Weixin SDK v6.5 开始支持 .NET Core 3.0,并将微信消息上下文进行了大幅度的重构,支持了使用分布式缓存存储上下文信息,这意味着在分布式系统中,现在 Senpa ...
- C#扩展方法学习笔记
C#扩展方法,简单的理解是不修改原来类的源代码的情况下,为某个类添加某个方法.扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的.它们的第一个参数指定该方法作用于哪个类型,并且该参数以 th ...
- jvm虚拟机笔记<三> 类文件结构与类加载机制
java虚拟机具有语言无关系,它只和“class文件“这种特定的二进制文件格式绑定. 不同语言的编译器将对应的程序编译成字节码文件(*.class),送给jvm执行. class文件本质上就是一张表, ...