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 GUI编程tkinter示例之目录树遍历工具
摘录 python核心编程 本节我们将展示一个中级的tkinter应用实例,这个应用是一个目录树遍历工具:它会从当前目录开始,提供一个文件列表,双击列表中任意的其他目录,就会使得工具切换到新目录中,用 ...
- JS---封装getScroll函数 & 案例：固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- 腾讯云推出一站式 DevOps 解决方案 —— CODING DevOps
在产业互联网的大背景下,如何将人工智能.大数据等前沿技术与实体产业相结合,推动传统企业转型升级,已经成为每一个企业不得不思考的问题.落后的软件研发能力已经拖慢了中国大量企业的数字化转型进程. 为了满足 ...
- Codeforces Round #608 (Div. 2) 题解
目录 Codeforces Round #608 (Div. 2) 题解 前言 A. Suits 题意 做法 程序 B. Blocks 题意 做法 程序 C. Shawarma Tent 题意 做法 ...
- python 打飞机项目 ( 基类封装 )
项目代码 | plane # -*- coding:utf-8 -*- import pygame, time from Plane import Plane from HeroPlane impor ...
- Promise代码详解（show you the code）
认识异步函数 同步函数: const sum1 =(a,b)=>{ return a+b } console.log('AAA'); console.log(sum(5,6)); conosle ...
- Elasticsearch系列---初识Elasticsearch
Elasticsearch是什么? Elasticsearch简称ES,是一个基于Lucene构建的开源.分布式.Restful接口的全文搜索引擎,还是一个分布式文档数据库.天生就是分布式.高可用.可 ...
- xml-mapping xml 与 java 对象转换映射框架，像 XStream 一样优雅地读写xml
xml xml 是 java 实现的 xml 框架. 希望以最优雅的方式进行 xml 和 java 之间的转换处理,一行代码搞定一切. 特点 对象的和 xml 的互相映射 支持注解 @Alias 指定 ...
- 字段明明存在，用Web API使用该字段进行查询报错？
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结
SAP_ECC6_EHP7_IDES安装文档ORACLE11G+WINDOWS2012 R2 问题总结 1.注意密码不能带@等特殊符号,否则会报如下错误,因为ORACLE数据是不容许密码带@的.@是一 ...