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); 这是子组件要发到父组件的写法 ...
随机推荐
- AKA “Project” Milestone
Homework 6 (60 points)Due Thursday, April 25th at 11:59pm (via blackboard) AKA “Project” Milestone # ...
- KXO151 Programming & Problem Solving
Page 1 of 9KXO151 Programming & Problem SolvingAIEN-SOU - 2019Assignment 2Deadline for Submissio ...
- COSC2309/2347 Semester 1, 2019
Mobile Application DevelopmentCOSC2309/2347 Semester 1, 2019Movie Night PlannerAssignment 1 (20 mark ...
- java 多线程争抢资源死锁
多线程争抢资源死锁的原理就是,A线程正在持有锁1却想获取锁2,B线程正在持有锁2却要获取锁1 代码如下: public class Main { static ReentrantLock lock1 ...
- Copy & XCopy
1):copy不能在有子目录存在的文件中拷贝文件的同时重命名此文件名(注:这里C:为根目录,bat为子目录),而xcopy能,不过会出现提示,当然你可以加参数而不使它提示. C:\>copy c ...
- git 远程
git remote add origin [远程仓库地址]
- jeecg富文本编辑器增加字体(仿宋)
jeecg富文本编辑器增加字体(仿宋) 温馨提示:jeecg 提供了 uedit 富文本的实现,如下针对的是 uedit 增加仿宋字体示例. 主要修改三个文件:plug-in\ueditor\uedi ...
- jeecg自定义datagrid查询
为什么要写这篇文章? 我们了解,使用 jeecg 提供的 CriteriaQuery 查询方式,确实能满足绝大数的需求,但是往往有那么个比较复杂的情况,需要我们直接去写 sql,比如多表查询呀等等等等 ...
- OC获取ip地址
+(NSString *)getIp{ NSError *error;NSURL *ipURL = [NSURL URLWithString:@"http://pv.sohu.com/cit ...
- Solaris环境下使用snoop命令抓包
(1)报文抓取 Solaris中自带有snoop抓包工具,通过执行相应的命令抓取. 抓取目的地址为10.8.3.250的数据包,并存放到/opt/cap250的文件里 snoop -o /opt/ca ...