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 -- 组件封装用 ...
随机推荐
- HA Joker Vulnhub Walkthrough
下载地址: https://www.vulnhub.com/entry/ha-joker,379/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.132Starti ...
- 2.Android-sdk目录介绍、ADT使用介绍、创建helloworld
1.android中常用名词介绍 ADT: ADT为Eclipse的插件.为Eclipse和SDK之间起了一个桥梁的作用. SDK: 软件开发工具包(Soft Development Kit),它为 ...
- MySQL基础-存储过程
存储过程 定义:将一批为了完成特定功能的SQL语句集,根据传入的参数(也可没有),调用,完成单个sql语句更复杂的功能 存储过程思想很简单,就是SQL语句层面上的代码封装和重用 优点:1) 可封装,并 ...
- MSSQL - 最佳实践 - 使用SSL加密连接
MSSQL - 最佳实践 - 使用SSL加密连接 author: 风移 摘要 在SQL Server安全系列专题月报分享中,往期我们已经陆续分享了:如何使用对称密钥实现SQL Server列加密技术. ...
- 搭建API Mock
所需环境 Node.js + MySQL 5.7+ Redis 4.0+ Node.js 安装 .要安装nvm,需要安装构建源包所需的工具,CentOS 上安装,用这些命令来安装构建工具: sudo ...
- 【数据库】SQLite3常用命令
版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 打开SQLite3文件 sqlite3 student.db //打开student. ...
- Spring Boot中使用Swagger2构建强大的RESTful(最新全,无坑)
1:说明 网上这类文章 太多, 一搜一大把 ,但是要不是知识太过于老旧,就是配置没有说名清楚,你的项目按照他的配置却不能正常运行: 所以本文的目的: 配置swagger 2 那swagger 1 不 ...
- 使用VeeValidate的data-vv-scope指定验证范围
<div class="login" v-show="activeTab === 1"> <div class="panel-con ...
- Flipcart 爬取流程
第一步:爬取分类url from requests_html import HTMLSession session =HTMLSession() #https://www.flipkart.com/l ...
- 文本切换器（TextSwitcher）的功能与用法
TextSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件时使用动画效果.与ImageSwitcher相似的是,使用TextSwit ...