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 ...
随机推荐
- bash 中 小括号的作用
单小括号 () ①命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命令和括号之间不必有空格. ...
- fiddler---Fiddler修改数据信息
在测试的过程中,可能我们会遇到需要修改一些数据查看请求返回内容是如何的,刚好Fiddler也可以满足我们的要求,Fiddler不仅可以抓包还可以修改包的内容 Fiddler修改数据原理 Fiddler ...
- UGUI Manual
以Unity 5.5 的官方文档为例 Canvas UI元素的前后顺序:SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex BasicLa ...
- 第一周-调用weka算法进行数据挖掘
第一周-调用weka算法进行数据挖掘 简单数据集data.txt @relation weather @attribute outlook {sunny, overcast, rainy} @attr ...
- DHCP服务基本搭建
DHCP原理 DHCP租约四部曲: A:客户端进行IP请求 当一个DHCP客户机启动时,会自动将自己的IP地址配置成0.0.0.0,由于使用0.0.0.0不能进行正常通信,所以客户机就必须通过DHCP ...
- Pwnable-leg
Download : http://pwnable.kr/bin/leg.c Download :http://pwnable.kr/bin/leg.asm 友链 https://blog.csdn. ...
- django中对数据库生成记录操作失败
在终端执行以下语句时,会发现一点效果也没有,但是在manage.py中会成功: python3 manage.py makemigrations # 仅仅是在小本本上(migrations文件夹)记录 ...
- mybatis中<include>标签的作用
MyBatis中sql标签定义SQL片段,include标签引用,可以复用SQL片段 sql标签中id属性对应include标签中的refid属性.通过include标签将sql片段和原sql片段进行 ...
- Sharding-JDBC:查询量大如何优化？
主人公小王入职了一家刚起步的创业公司,公司正在研发一款App.为了快速开发出能够投入市场进行宣传的版本,小王可是天天加班到很晚,忙了一段时间后终于把第一个版本赶出来了. 初期功能不多,表也不多,用的M ...
- PM学习笔记（一）：解构产品经理
1.产品定义:什么是产品 来自百度百科(链接)的解释: 产品是指能够供给市场 [1] ,被人们使用和消费,并能满足人们某种需求的任何东西,包括有形的物品.无形的服务.组织.观念或它们的 ...