$emit 和 $on 进行平行组件之间的传值
效果图：
注：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发；
$emit 触发
$on 接收
需求：
1、有A、B、C三个组件，同时挂载到入口组件中；
2、将A组件中的数据传递到C组件，在将B组件中的数据传递到C组件；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
<script>
var event = new Vue();
var A = {
data(){
return {
a:'我是A组件数据【天王盖地虎】'
}
},
template:'<div><span>A组件数据->{{a}}</span><button class="btn btn-info" @click="send">将数据传递给C组件</button></div>',
methods: {
send(){
//$emit('事件名称',数据);
//为什么不用this.$emit 根本传输不了值，需要挂载到一个公共的vue实例中;
event.$emit('a-c',this.a);
}
},
}
var B = {
data(){
return {
b:'我是B组件数据【宝塔镇河妖】'
}
},
template:'<div><span>B组件数据->{{b}}</span><button class="btn btn-success" @click="send">将数据传递给C组件</button></div>',
methods: {
send(){
//$emit('事件名称',数据);
event.$emit('b-c',this.b); }
},
}
var C = {
data() {
return {
a:'',
b:''
}
},
template:'<div><h3>我是C组件</h3><p>接收到的A组件数据为：{{a}}</p><p>接收到的B组件数据为：{{b}}</p></div>',
mounted() {
// $ on ('事件名称',回调函数fn(a))
event.$on ('a-c',(a)=>{//接收a-c 的事件 数据
this.a = a ;
});
event.$on ('b-c',(b)=>{//接收b-c 的事件 数据
this.b = b ;
});
},
}
new Vue({
el:'#app',
components:{
'dom-a':A,
'dom-b':B,
'dom-c':C,
}
})
</script>
</body>
</html>
随机推荐
- java 中的运算符
Java的运算符,分为四类: 算数运算符.关系运算符.逻辑运算符.位运算符. 算数运算符():+ - * / % ++ -- 关系运算符():== != > >= < <= 逻 ...
- Javascript中this、prototype、constructor的理解(转载)
http://www.cnblogs.com/phpmix/articles/1734031.html
- web接口开发基础知识－什么是web接口？
比如我们访问百度的首页,输入的url地址是:https://www.baidu.com/ 那么当我们在浏览器地址栏中输入url,敲回车后,发生了什么事情?怎么就能通过1个url地址就能看到百度的首页了 ...
- 使用python执行sql语句和外键解析
一.下载并导入pymysql pip install pymysql && import pymysql db=pymysql.connect(host=) #如果报错host大概率因 ...
- Entity Framework Code First数据库连接 转载 https://www.cnblogs.com/libingql/p/3351275.html
Entity Framework Code First数据库连接 1. 安装Entity Framework 使用NuGet安装Entity Framework程序包:工具->库程序包管理器 ...
- 关于Visual Studio中书签Bookmark的一些问题
VS自带一个书签功能,但是有个大问题,没有导出功能,因为这个书签是保存在工程.suo文件中,所以在移动,分享,甚至其他情况下很不方便,甚至丢失. 在你分析一个较大的开源,做了30-50个关键代码书签, ...
- 【小刘的linux学习笔记 】——01认识操作系统
1.操作系统的地位 计算机系统由硬件和软件两部分组成.通常把未配置软件的计算机称为裸机.直接使用裸机不仅不方便,而且将严重降低工作效率和机器的利用率. 操作系统(OS,Operation System ...
- php难不难？
php难不难?多久能学会? 我认为php难不难学和php多久学会是一个共性问题,所以我们首先来总结下有那么几种情况. 好的情况: 1.不排除有的人有天赋.智商高脑仁大.上手很快,这个和脑仁中的Z字回形 ...
- spring容器的启动过程
spring的启动过程: 首先,对于一个web应用,其部署在web容器中,web容器提供其一个全局的上下文环境,这个上下文就是ServletContext,其为后面的spring IoC容器提供宿主环 ...
- [JSOI2007]建筑抢修(贪心+后悔)
[JSOI2007]建筑抢修(贪心+后悔) 洛谷题目传送门 吐槽 这是一道经典的贪心后悔的题目 做过贪心加后悔的题目的应该一眼可以看出来 解题思路 首先按倒塌时间T2排序,再从1枚举到n,能修就修,发 ...