Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门
Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信
我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的
Learn
目录结构
【每个demo下方都存有html源码】
一、单项数据流
定义组件A和组件B，组件A和组件B同级关系，当点击<template-a>的button控件时，调用sendData函数，将template-a中的data数据发向template-b
<template id="template-a">
<div>
<h1>my-component-a</h1>
comA name : <span>{{name}}</span><br />
<button @click="sendData">发送数据给comB</button>
<hr />
</div>
</template> <template id="template-b">
<div>
<h2>my-component-b</h2>
comB name : <span>{{nameB}}</span>
<hr />
</div>
</template>
coma绑定template-a模块组件，comb绑定template-b模块组件，要进行数据中转时候，一定要注意template-b模块组件中的this关键字
let comA = {
template : "#template-a",
data(){
return {
name : "AdataGary"
}
},
methods : {
sendData(){
vm.$emit('send-event-a', this.name);
}
}
}
let comB = {
template : "#template-b",
data(){
return {
nameB : ''
}
},
mounted(){
/*vm.$on('send-event-a', function(value){
console.log(this);
this.nameB = value;
});*/
vm.$on('send-event-a', name => {
console.log(this);
this.nameB = name;
})
}
}
在Vue中注册申请
let vm = new Vue({
data : {
msg : 'Garydat'
}
});
new Vue({
data : {
},
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("#GaryId");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</div>
</body> <template id="template-a">
<div>
<h1>my-component-a</h1>
comA name : <span>{{name}}</span><br />
<button @click="sendData">发送数据给comB</button>
<hr />
</div>
</template> <template id="template-b">
<div>
<h2>my-component-b</h2>
comB name : <span>{{nameB}}</span>
<hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> let comA = {
template : "#template-a",
data(){
return {
name : "AdataGary"
}
},
methods : {
sendData(){
vm.$emit('send-event-a', this.name);
}
}
} let comB = {
template : "#template-b",
data(){
return {
nameB : ''
}
},
mounted(){
/*vm.$on('send-event-a', function(value){
console.log(this);
this.nameB = value;
});*/
vm.$on('send-event-a', name => {
console.log(this);
this.nameB = name;
})
}
} let vm = new Vue({
data : {
msg : 'Garydat'
}
});
new Vue({
data : { },
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("#GaryId"); </script>
</html>
Gary_non-fatherAndSon.html
Vue_(组件通讯)非父子关系组件通信的更多相关文章
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
随机推荐
- id和class的区别
id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20 ...
- 数据库HAVING的使用
HAVING语句通常与GROUP BY语句联合使用,用来过滤由GROUP BY语句返回的记录集. HAVING语句的存在弥补了WHERE关键字不能与聚合函数联合使用的不足. 记录一下
- CSS 小工具集
http://www.colorzilla.com/gradient-editor/css渐变生成工具.http://linxz.github.io/tianyizone/css志爷小工具.http: ...
- luogu P3645 [APIO2015]雅加达的摩天楼
luogu 暴力? 暴力! 这个题有点像最短路,所以设\(f_{i,j}\)表示在\(i\)号楼,当前\(doge\)跳跃能力为\(j\)的最短步数,转移要么跳一步到\(f_{i+j,j}\)和\(f ...
- Redis-List常用命令
Redis-List常用命令 lpush key value- 将指定value推到指定key的最左端.假如有 key1 对应值为 1 2 3,现在lpush key1 4,将4推到队列的最左端,那么 ...
- django概念理解
STATIC_URL 和 STATICFILES_DIRS 区别 static_url指定浏览器上访问静态文件的url前缀,也就是'/static/'前缀的都会认为是静态文件,django不解析,直 ...
- go语言在Windows系统下编译成linux系统可执行文件
package main import ( "fmt" "os" "os/exec" ) //filepath: 要编译的文件的路径 fun ...
- python如何编译py文件生成pyc、pyo、pyd以及如何和C语言结合使用
python执行py文件的流程 当我们执行一个py文件的时候,直接python xx.py即可,那么这个流程是怎么样的呢.先说明一下,python执行代码实际上是先打开文件然后执行里面的代码,所以文件 ...
- DA_04_解决Xshell中文乱码问题
一:解决Xshell中文乱码问题 二:解决克隆后eth0不见的问题 2.1:虚拟机克隆步骤: 1.直接修改 /etc/sysconfig/network-script/i ...
- 认识并初步应用GitHub——C++
好好学习,天天向上 一.这是一个根据规定的开头 GIT的地址 https://github.com/Notexcellent GIT的用户名 Notexcxllent 学号后五位 82405 博客地址 ...