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); 这是子组件要发到父组件的写法 ...
随机推荐
- linux 编译静态库及动态库例子--from周立功文档
/* hello1.c */#include <stdio.h>int hello1 (void){printf("hello 1!\n");return 0;}/* ...
- ASP.NET Core 2.2 迁移至 3.0 备忘录
将 ASP.NET Core 2.2 迁移至 ASP.NET Core 3.0 需要注意的地方记录在这篇随笔中. TargetFramework 改为 netcoreapp3.0 <Target ...
- mysql数据库的查询，添加，删除，还原，备份
18章数据mariadb数据库 1.setup 配置网卡centos6.52.nmtui 网卡图形配置界面3.yum install mariadb mariadb-server4.systemctl ...
- 2018-2019-2 网络对抗技术 20165317 Exp3 免杀原理与实践
2018-2019-2 网络对抗技术 20165317 Exp3 免杀原理与实践 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用 ...
- MongoDB - Indexes
#explain command pp db[:zips].find(:state => 'MD').explain #List all indexes: db[:zips].indexes.e ...
- pkg-config 详解
转载自:https://blog.csdn.net/newchenxf/article/details/51750239 1 什么是pkg-config pkg-config是一个linux下的命令, ...
- LockScreen
<Window x:Class="XXX.Client.LockScreenView" xmlns="http://schemas.microsoft.com/wi ...
- opencart精简checkout购物流程
最近在做一个商城项目,让外国朋友帮忙看看,他给我们一些建议了,其中他说Can You make more simple buying Button,3 step:Sign up :Shipping A ...
- java框架之SpringBoot(17)-监控管理
介绍 SpringBoot 提供了监控管理功能的场景启动器,它可以为我们提供准生产环境下的应用监控和管理功能.我们可以通过HTTP.JMX.SSH协议来进行操作,自动得到审计.健康及指标信息等. 使用 ...
- js中类似null==flase的比较图集
以上是比较全的图集了,大家可以自行测试.