$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>
随机推荐
- 最长上升子序列（LIS）动态规划
最长上升子序列 给你n个整数 A1 A2 ········· An 找出在这个数组里面的最长上升的子序列.例如给你(1,7,3,5,9,4,8),他的上升子序列有(1,7) (3,4,8)等等之类的, ...
- Mac下隐藏或显示文件/文件夹
命令行操作 显示:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏:defaults write com.apple.fi ...
- Linux学习篇（四）-Linux 文件管理命令详解
rootfs:根文件系统,Root FileSystem 的简称. Linux 文件命名规则 长度不超过255个字符. 不能使用/当文件名. 严格区分大小写. Linux 目录简介 / 根目录 /bo ...
- python安装centos7
1.安装git (需root权限) yum -y install git 2.安装依赖包 yum -y install gcc make patch gdbm-devel openssl-devel ...
- HeightCharts柱状图和饼状图
HTML: <div id="container1" style="height:350px; " ></div> <di ...
- 异步请求jquery action
package com.tarena.action; import java.util.HashMap;import java.util.Map; import javax.annotation.Re ...
- angularJS拦截路由
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams)
- JAVA线程初体验
线程的创建 线程的启动和停止 /** * 演员类 继承Thread类 * @author Administrator * */ public class Actor extends Thread { ...
- Codeforces 1080C 题解（思维+二维前缀和）
题面 传送门 题目大意: 有一个黑白的棋盘,现在将棋盘上的一个子矩形全部染成黑色,另一个子矩形全部染成白色 求染完色后黑,白格子的总数 分析 我们可以发现,对于一个(1,1)到(x,y)的矩形,若xy ...
- Zookeeper——启动闪退
Zookeeper好久不启动了,昨天项目要用Zookeeper了,我昨天突然启动它,调皮的zk居然害羞不让我看见它,启动不了,一启动就闪退,为啥呢?其实是因为报错了,有错zk启动时就会报错,所以昨 ...