Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信；
我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的；
实例：
初始加载界面：
初始界面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子关系组件之间的通信</title>
</head>
<body>
<div >
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</div>
</body> <template id="template-a">
<div>
<h1>my-component-a</h1> <hr />
</div>
</template> <template id="template-b">
<div>
<h2>my-component-b</h2> <hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> let comA = {
template : "#template-a", } let comB = {
template : "#template-b", } new Vue({
data : { },
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("div"); </script>
</html>
使用监听事件后：
添加的监听事件的代码：
let comA = {
template : "#template-a",
data(){
return {
name:'perfect'
}
},
methods:{
sendData(){
vm.$emit('send-event-a',this.name);
}
}
}
let comB = {
data(){
return{
nameB:''
}
},
template : "#template-b",
mounted(){
vm.$on('send-event-a',name=>{//监听数据
console.log(this);
this.nameB=name;
})
}
}
let vm=new Vue({
data:{
msg:'cool'
}
});
new Vue({
data : {
},
调用事件部分：
<template id="template-a">
<div>
<h1>my-component-a</h1>
comA name:<span>{{name}}</span>
<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>
最终代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>非父子关系组件之间的通信</title>
</head>
<body>
<div >
<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>
<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:'perfect'
}
},
methods:{ sendData(){
vm.$emit('send-event-a',this.name);
}
} } let comB = { data(){
return{
nameB:''
}
},
template : "#template-b",
mounted(){ vm.$on('send-event-a',name=>{//监听数据
console.log(this); this.nameB=name;
})
} }
let vm=new Vue({ data:{
msg:'cool'
}
}); new Vue({
data : { },
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("div"); </script>
</html>
非父子关系组件之间的通信
Vue 组件&组件之间的通信 之 非父子关系组件之间的通信的更多相关文章
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- Vue组件通信之非父子组件传值
前言: 如果想要了解非父子关系的组件传值,最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路. 因为非父子传值是通过定义事件总线来代理实现父传子+子传父从而实现的传值方式. 这是 ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue组件通信之非父子组件通信
什么顺序不顺序的.. 先来说说非父子组件通信. 首先,我们先来了解下vue中的 1.$emit 触发当前实例上的事件,附加参数都会传给监听器回调. 2.$on 监听当前实例上的自定义事件.事件可以 ...
- Vue组件传值（二）之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue 父子之间通信及非父子之间通信
直接看图说话 vue Bus总线 import Vue from 'vue';import VueBus from 'vue-bus';Vue.use(VueBus); 这是子组件要发到父组件的写法 ...
随机推荐
- Hadoop wordcount Demon
搭建完成Hadoop后,第一个demon,wordcount.此处参考:http://blog.csdn.net/wangjia55/article/details/53160679 wordcoun ...
- 如何使用iOS开发者授权以及如何申请证书
如何使用iOS开发者授权以及如何申请证书 在邮件里有一个Login按钮,点击后可以进入Apple Developer会员中心.点击图中的iOS Provisioning Portal,进入开发者授权设 ...
- spring boot 采坑
2019年2月19日19:25:42 版本 2.1.3.RELEASE 1,本地开发需要加依赖库,保存实时热更新 <dependency> <groupId>org.sprin ...
- spring cloud
如果是一个大型的网站,内部子系统较多.接口非常多的情况下,RPC框架的好处就显示出来了,首先就是长链接,不必每次通信都要像http 一样去3次握手什么的,减少了网络开销:其次就是RPC框架一般都有注册 ...
- pe文件头详解
- JDK安装路径下的JRE与独立安装的JRE区别
在JDK安装目录下的子文件下,已经默认安装了一个jre.且与独立安装的JRE6所包含的文件几乎完全一样. JDK里面内置的JRE和独立的JRE是有一点差别的: 在JDK安装文件中包含了一个完整的独立版 ...
- linux-rhel7配置网卡bond双网卡主备模式
参考以下文章中的 2.centos7配置bonding: https://www.cnblogs.com/huangweimin/articles/6527058.html 以下是配置过程的操作和打印 ...
- CSAPP：第一章学习笔记：斗之气1段
一.信息就是位+上下文:系统中的所有信息(包括磁盘文件.内存中的程序.网络上传送的数据),都是由一串比特表示,根据上下文对这些比特表示进行翻译. 二.C程序编译过程 1.源码结构 // test.c ...
- JDK8 BigDecimal API-创建BigDecimal源码浅析二
第二篇,慢慢来 根据指数调整有效小数位数 // 上一篇由字符串创建BigDecimal代码中,有部分代码没有给出,这次补上 // 这个是当解析字符数组时存在有效指数时调整有小小数位数方法 privat ...
- java的冒泡排序
public interface Sorter{ public <T extends Comparable<T>> void sort(T[] list); //定义两个待排序 ...