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 ...
随机推荐
- luoguP4404缓存交换
https://www.luogu.org/problem/P4404 题意 你有一个大小为n的缓存区,有个长度为m的查询序列. 每次查询的时候需要把查询值放入缓存,若缓存已满,则先删除任一位置再将其 ...
- c# 第29节 类
本节内容: 1:类是什么 2:声明类 3:类的使用 1:类是什么 2:声明类 在生产上的声明:如下操作 或者快捷操作 ctrl+shift+a 键 出现如下界面: 3:类的使用 using Sys ...
- day47_9_6(前端之js)
一.js发展. 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准.次年,ECMA发布262号 ...
- JDOJ3011 铺地板III
JDOJ3011 铺地板III https://neooj.com/oldoj/problem.php?id=3011 题目描述 有3 x N (0 <= N <= 105)的网格,需要用 ...
- luoguP4151 [WC2011]最大XOR和路径
题意 这题有点神啊. 首先考虑注意这句话: 路径可以重复经过某些点或边,当一条边在路径中出现了多次时,其权值在计算 XOR 和时也要被计算相应多的次数 也就是说如果出现下面的情况: 我们可以通过异或上 ...
- SQL Server 迁移数据库 （四）备份和还原
1. 备份 2. 复制 3. 粘贴 4. 还原 截图软件出问题了,估计重启下就好,但是备份还原比较简单,懂的都懂,马上下班了就不贴图了.
- hdu 6465 线性变换高斯消元
http://acm.hdu.edu.cn/showproblem.php?pid=6465 题意 给你三个点,再给你经过线性变换后的三个点,然后q次询问,给你一个点,需要你输出线性变换后的点 题解 ...
- Note | 期刊答复（response）
第一次TPAMI回复整理的经验. 190926:TPAMI中了,特回来补充. 简洁 尤其对于问答型问题,一定要在前三句话就回答审稿人的问题:yes or no. 不要绕弯子,专注于审稿人问题,解决就行 ...
- 06Shell并发控制
并发控制 文件描述 文件句柄 File Descriptors (FD,文件描述符)或 文件句柄: 进程使用文件描述符来管理打开的文件 注意 1.如何通过exec打开一个文件 exec 数字<& ...
- Redis 设计与实现，看 SDS(Simple Dynamic String) 感悟
Redis 设计与实现,看 SDS(Simple Dynamic String) 感悟 今天在看 Redis 设计与实现这本书的时候,发现了里面系统定义的数据结构 SDS,中文名为 简单动态字符串.对 ...