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 ...
随机推荐
- sleep() 和 wait() 有什么区别：
①原理不同. sleep()方法是Thread类的静态方法,是线程用来控制自身流程的,它会使此线程暂停执行一段时间,而把执行机会让给其他线程,等到计时时间一到,此线程会自动苏醒.而wait() ...
- client-go向controller进发---手动实现
参考URL: https://www.jianshu.com/p/49f741492874 完全靠手动实现,不用code-generator,kubebuilder或是operator-sdk. 要注 ...
- NOIP2007 奖学金 结构体排序
是结构体排序的练习题,可供选手们巩固结构体排序的一些相关内容. 关于结构体排序 1.结构体定义 struct student { int num,a,b,c,sum; }p[]; 2.结构体初始化 ; ...
- angular设置全局变量，修改监听变量
创建service.module.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { SomeShar ...
- Python Singleton Pattern(单例模式)
简介 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. 当 ...
- Python进阶-XVIV 类的内置方法：__str__ 、__repr__、析构函数（__del__）、双下的call,eq,new,hash 以及item相关的三个方法
类的内置方法 它与内置函数有紧密的联系,有的内置函数就是调用的内置方法. 在顶级父类obj中有: 两个双下方法 obj.__str__ str(obj) obj.__repr__ repr(obj) ...
- 8.Go-Reader,Writer和ioutil
8.1.Reader (1)输入流 流是应用程序和外部资源进行数据交互的纽带 流分为输入流和输出流,输入和输出都是相对于程序,把外部数据传入程序中叫做输入流,反之叫做输出流 在Go语言标准库中io包下 ...
- T-SQL（SQLSERVER）
使用自定义类型名 CREATE DATABASE Student GO USE Student GO Exec sp_addtype char20,'varchar(20)','null' GO 在库 ...
- 数据仓库010 - MySQL查看所有存储过程,函数，视图，触发器
.查询数据库中的存储过程和函数 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE ...
- git push时出现 Username for 'https://github.com': 仅仅限于github
使用git push origin master是出现如下问题:Username for 'https://github.com': 解决办法: git remote set-url origin g ...