$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>
随机推荐
- Newtonsoft.Json源码的solution打开之后，无法加载project
无法加载项目 https://github.com/JamesNK/Newtonsoft.Json C:\repository\GitHub\Other\Newtonsoft.Json\Src\New ...
- 利用AddressBook.framework框架获取iOS系统通讯录数据
此方法是使用AddressBook.framework框架获取通讯录信息 第一步.在info.plist文件里面配置访问权限 第二步.导入头文件 #import <AddressBook/Add ...
- js new date（）方法移动端兼容
将这个时间字符串"2016-06-07 12:51:21",转换成标准时间格式:Tue May 15 2018 14:06:15 GMT+0800 (中国标准时间) 首先是在安卓上 ...
- 134、TensorFlow检查点checkpoint文件中的信息
# 1.你想创建多少Saver对象就可以创建多少,如果你需要去保存和恢复不同的子图模型 # 同样的变量可以在不同的saver对象中被加载 # 只有在Saver.restore()方法被调用的时候才会对 ...
- Jenkins+GitLab持续集成
向GitLab提交代码之后自动触发Jenkins构建 https://baijiahao.baidu.com/s?id=1630678692475452408&wfr=spider&f ...
- STM32 HAL库关于串口中断烧录程序后可以正常运行，断电重启后无法进入中断的问题分析以及解决方法
1.情景描述: 最近在做一个项目,X86的上位机通过串口控制MCU,使用串口中断接收上位机数据时,MCU在上电的情况下烧录程序,可以正常接收上位机的数据,在断电重启后,一直进入不了中断回调函数,上电的 ...
- Effect Hook
1 数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用. 2 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdat ...
- stl vector创建二维数组
vector<vector<); for (auto it = v.begin(); it != v.end(); it++) { ; (*it).reserve();//预留空间为5,但 ...
- [Linux] 002 预备知识
1. 开源软件 (1) 常见开源软件 Apache NGINXTM MySQL PHP Saamba mongoDB Python Ruby Sphinx -- (2) 开源软件的特点 绝大多数开源软 ...
- DevExpress Winform使用单例运行程序方法和非DevExpress使用Mutex实现程序单实例运行且运行则激活窗体的方法
原文:DevExpress Winform使用单例运行程序方法和非DevExpress使用Mutex实现程序单实例运行且运行则激活窗体的方法 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA ...