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 -- 组件封装用 ...
随机推荐
- 松软科技课堂:JS HTML DOM
通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素. HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Objec ...
- Mac OS X 快速添加新文件
本文为 automator (中文名为 自动操作)的练习之作,尚有许多不足. 如果你想在 OS X 系统中快速添加新文件可直接参考此文 简介 本文使用 automator 创建了一个应用程序 auto ...
- 微信 电脑版 HOOK（WeChat PC Hook）- 框架
软件构成:一个主进程exe和一个注入的dll主进程exe:把dll注入到微信,发送指令给dll,接受dll的信息注入的dll:被注入到微信内部,拦截微信的数据,调用微信的功能 接收主进程的指令,执行指 ...
- Mass Assignment:Request Parameters Bound into Persisted Objects 质量分配：请求绑定到持久对象中的参数
- 2019 Vue开发指南：你都需要学点啥？
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://dzone.com/articles/vue-development-in-2019 ...
- .netcore3.0 System.Text.Json 日期格式化
.netcore3.0 的json格式化不再默认使用Newtonsoft.Json,而是使用自带的System.Text.Json来处理. 理由是System.Text.Json 依赖更少,效率更高. ...
- code snippet：依赖属性propa的小技巧
很早之前就玩过VS里面的code snippet,相当方便. 今天在用prop自动属性代码时,无意中用了一下propa,然后就自动出来了依赖属性的代码片段,太方便了,尤其是对于WPF新手来说,比如我这 ...
- typeORM 多对多关系不同情况的处理
本文以RBAC权限管理中的用户和角色举例,两个实体存在多对多的关系,一个用户拥有多个角色,一个角色属于多个用户.typeorm的中文文档没有对自定义中间表的说明,发现英文有相关说明,但示例代码貌似有问 ...
- C lang: VLA(variable-length array)
Xx_VLA Introduction VLA:variable-length array,not variable array size,but variable arary dimensional ...
- iOS字符串处理_替换(去掉空格换行)、截取
以下代码主要实现了:1.截取"@@"前的字符串: 2.去掉字符串中的"##": 3.去掉字符串中的空格和换行. 希望相互学习相互指正. -----ViewC ...