$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>
随机推荐
- flask之二
flask之二 预热 在渲染模板的时候,默认会从项目根路径下的templates目录下查找模板 如果想要指定模板路径的时候,就在初始化APP的时候,这样操作即可: app = Flask(__name ...
- Windows建立目录软连接
创建:mklink /j "I:\dst" "I:\src" 删除: rmdir "I:\dst"
- 004-URL编码转换函数：escape()、encodeURI()、encodeURIComponent()
一.概述 函数出现时间: escape() javascript 1.0 ...
- 测开之路七十四：python处理kafka
kafka-python地址:https://github.com/dpkp/kafka-python 安装kafka-python:pip install kafka-python 接收消息 fro ...
- 全文搜索 ElasticSearch
今天突然想了解一下ES,看看有什么优势,能不能用在项目中. 说到ES就不得不了解它的底层技术-全文检索 Ref: 全文检索的基本原理 https://blog.csdn.net/wangmaohong ...
- linux flock()
表头文件 #include<sys/file.h> 定义函数 int flock(int fd,int operation); 函数说明 flock()会依参数operation所指 ...
- phpstudy开启PHPSocket扩展（windows系统）
PHP开启Socket扩展 一.windows系统(本地电脑) 1.打开phpstudy,设置——>配置文件——>打开php.ini(我安装的是PhpStudy v8.0,其他版本请自己找 ...
- Pytest+Allure2+Jenkins搭建
前置: (1)安装Python3(这里版本为3.7) (2)搭建Jenkins环境 一.安装pytest 直接使用pip安装(这里由于笔者的环境同时安装了Python2和Python3,所以在pyth ...
- HTML批量修改——正则表达式实践
目录 1.问题描述 2.初步研究 3.进一步研究 3.1提取2.*中的序号* 3.2提取标题 3.3选取全文 3.4替换 参考资料 1.问题描述 如下所示的一段HTML代码: ... <h2 a ...
- 《JAVA设计模式》之策略模式(Strategy)
在阎宏博士的<JAVA与模式>一书中开头是这样描述策略(Strategy)模式的: 策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它 ...