vuejs兄弟通信$emit和$on
1 vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数.
2 vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--view-->
<div id="app">
<xiongda></xiongda>
<xionger></xionger>
</div>
<script>
var bus=new Vue();
Vue.component('xiongda',{template:`
<div>
<h3>我是熊大</h3>
<button @click="noticex2">通知熊二</button>
</div>
`,methods:{
noticex2:function () {
//$emit是用于触发定义在熊二<xionger>的自定义事件my-eventX2,'加传递过去的参数'
bus.$emit('my-eventX2','光头强来了');
}
},
mounted:function () {
bus.$on('noticex1',function (msg) {
//用于创建noticex1，可以接收$emit传递的消息
console.log(msg);
})
}
});
Vue.component('xionger',{template:`
<div>
<h3>我是熊二</h3>
<button @click="sendtoda">通知熊大 </button>
</div>
`,
mounted:function () {
//通知熊二的方法写在钩子函数中
//第一个参数表示创建一个自定义事件
bus.$on('my-eventX2',function (msg) {
console.log(msg);
})
},methods:{
sendtoda:function () {
bus.$emit('noticex1',"熊大，我收到消息了，立马过去！")
}
} });
new Vue({ //viewmodel
el: 'div',
data: {msg: 'Hello EN', dd: 'you are welcome!'}//model
});
</script>
</body>
</html>
==========================全家桶式的兄弟通信过程====================================
vuejs兄弟通信$emit和$on的更多相关文章
- vuejs兄弟组件之间的通信
var Event = new Vue();//准备一个空的实例对象 //A组件 var A = { template: ` <div> <span>我是A组件的数据-> ...
- VUe兄弟通信
用过Vue,你肯定知道,Vue组件之间的通信常见的有$dispatch - 通过冒泡的方式传递事件$broadcast - 通过广播的方式向子孙组件传递事件 如果组件之间的关系只是父-子关系,那么di ...
- iframe通信相关：父操作子，子操作父，兄弟通信
这里写window和document是认为代表了BOM和DOM(个人理解不一定对) 拿到了window就能操作全局变量和函数 拿到了document就能获取dom,操作节点 父操作子 window:选 ...
- vuejs组件通信
<body> <div id="example"> <father></father> </div> </body ...
- vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一.父组件传值给子组件 父组件 ...
- Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angularjs $emit $on $broadcast 父子 兄弟之间传值
父子之间 <div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> ...
- vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
随机推荐
- ctr预估论文梳理和个人理解
问题描述 ctr的全称是click through rate,就是预估用户的点击率,可以用于推荐系统的ranking阶段.ctr预估可以理解为给用户的特征.item的特征以及context的特征(比如 ...
- Hive SQL编译过程（转）
转自:https://www.cnblogs.com/zhzhang/p/5691997.html Hive是基于Hadoop的一个数据仓库系统,在各大公司都有广泛的应用.美团数据仓库也是基于Hive ...
- day35作业
1. 查询所有大于60分的学生的姓名和学号 (DISTINCT: 去重) -- 2.查询每个老师教授的课程数量 和 老师信息 -- 3. 查询学生的信息以及学生所在的班级信息 -- 4.学生中男生的个 ...
- WebUI自动化测试框架
基于Python+Selenium+Unittest+Ddt+HTMLReport 框架结构: Business:业务相关公共模块,如登录 Common:业务无关公共模块,如读取文件 PageObje ...
- 开始认识java
1.java发展历史 1991年 詹姆斯·高斯林 (James Gosling) SUN公司Green项目(消费类电子产品) Oak ...
- vue+elementUI+node实现登录模块--验证用户名是否正确
验证用户名是否正确 1==>// 引入qs import qs from 'qs'; 2===>收集用户账号后, 发送请求 把参数发给后端(把用户名和密码发给后 ...
- GitHub如何配置SSH Key
https://github.com/xiangshuo1992/preload.git git@github.com:xiangshuo1992/preload.git 这两个地址展示的是同一个项目 ...
- 重构与模式 (Joshua Kerievsky 著)
第1章 本书的写作缘由 第2章 重构 第3章 模式 第4章 代码坏味 第5章 模式导向的重构目录 第6章 创建 第7章 简化 第8章 泛化 第9章 保护 第10章 聚集操作 第11章 实用重构 参考文 ...
- python django url直接访问txt文件。urls.py路由直接指向txt文件
from django.views.generic import TemplateView urlpatterns = [ url(r'^test/',TemplateView.as_view(tem ...
- [Codeforces1250E] The Coronation
[Codeforces1250E] The Coronation The Coronation 又是一道并查集...最近做的并查集咋这么多... 思路 首先,维护元素间关系的题想到并查集. 因为这里涉 ...