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 -- 组件封装用 ...
随机推荐
- 1、手写Unity容器--极致简陋版Unity容器
模拟Unity容器实例化AndroidPhone 思路: 1.注册类型:把类型完整名称作为key添加到数据字典中,类型添加到数据字典的value中 2.获取实例:根据完整类型名称也就是key取出val ...
- VS删除代码中没用的空白行
在vs编辑器中有时需要批量删除无用的空白行,为此,可以使用vs编辑器的查找替换功能: 1. Ctrl+H,打开替换功能框. 2.选择“使用正则表达式”,“当前文档”. 3.在查找框中输入: (?< ...
- C#界面设计相关设置
1.Anchor属性设置 对需要设置的控件,如主窗体中的TextBox,设置Anchor为上下左右都停靠,就会实现随着窗体的变化而变化. 2.AutoScaleMode属性的用法:<转自:htt ...
- Dubbo环境搭建-ZooKeeper注册中心
场景 Dubbo简介与基本概念: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103555224 注: 博客: https:// ...
- Springboot整合redis步骤
一.加入依赖 <dependency> <groupId>com.github.spt-oss</groupId> <artifactId>spring ...
- VMware Workstation 15 Pro中安装ubuntu1804
这篇笔记是一篇安装教程,没有什么实际的意义,仅为了记录一下……距离上次弄这东西不知道多长时间了,以至于这次再次使用时很是生疏,于是就想着把过程记录下来方便之后查看. 这里不涉及VMware Works ...
- React组件的属性
组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...
- java基础|自定义java线程池
线程池创建的参数 在创建线程的各种方式中我们有讲到过通过创建线程池来完成异步操作,但实际上jdk提供的Executors来创建线程池都还有些缺陷,线程池有以下几个参数: 代码节选自源码ThreadPo ...
- java8新特性之——lambda表达式的使用
lambda表达式简介 个人理解,lambda表达式就是一种新的语法,没有什么新奇的,简化了开发者的编码,其实底层还是一些常规的代码.Lambda 是一个匿名函数,我们可以把 Lambda 表达式理解 ...
- bootstrap-table 常用总结-树形结构
关于树形结构,上篇文章如果还是不能理解的话,请看这一篇.把其他的没有用到的功能都去掉,只留最基础的树形结构! 废话不多说,直接上代码!所有的数据都是走的本地,如果大家想改的话可以自己改,但是需要注意的 ...