一、$emit

1、this $emit（'自定义时间名',要传送的数据）；

2、触发当前实例上的时间，要传递的数据会传给监听器；

二、$on

1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据；

2、监听当前实例上自定义时间；

三、接下来我们通过一个实例来解释

1、想要实现的

数据刷新

废话不多说，上代码

以下是子组件

子组件部分代码

子组件js部分

父组件代码

父组件部分代码

父组件js部分

首先简单的点击事件不同去过多的描述，使用v-on：click就可以了，然后在methods里写上判断就可以实现了。

简单来说，就是子组件pagination想要传递curpage给父组件tabs，父组件需要接收到curpage并且要告知子组件，不然子组件完全不知道。

这里需要强调的一点是：on和emit事件必须是在一个公共的实例上才能触发。

子组件说：父组件你挺好了，我用$eimt把数据传给你啊，你记得看看有没有拿到啊。

父组件说：好的，不怕，我有$on这个东东，我可以随时监听到你传了啥，你传给我什么，我就变成什么呗，没办法，你传给我的，我是要跟随你的。

旁白：但是你们两必须得在一个世界啊，别一个在二次元，一个在三次元，那样没法传啊。这样吧，你们都必须保证在同一个地方吧。

子组件：好，那我这边有一个bus，父组件那也有一个bus，那我们两都到那吧。

旁白：一定要记住你们可以使用一个空的 Vue 实例作为中央事件总线。毕竟性别不同怎么谈恋爱啊。

父组件在created里面定义$on监听事件在子组件中定义点击事件，调用父组件方法通过$emit将相应值传给父组件

网上百度千篇一律全是使用$emit来实现，可是都有一个严重的误区没有给别人说明，开始我都按照搜索的结果进行操作，都会出现子组件$emit后父组件没有监听到函数的变化，研究了好久才发现$emit和$on的事件必须在一个公共的实例上，才能够触发。我的操作如下：

首先在main.js里新加bus作为一个公共的实例，如下图

bus全局

在子组件中通过$emit触发组件

在父组件中通过$on监听组件

作者：敷衍小白
链接：https://www.jianshu.com/p/a544728bf596
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

说一说$emit和$on相关推荐

【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...
Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
app.component.html <app-in-out [in]='"传输进入"' (out)="out($event)" ></app ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...
【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定
子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...
OSS.Core基于Dapper封装(表达式解析+Emit)仓储层的构思及实现
最近趁着不忙,在构思一个搭建一个开源的完整项目,至于原因以及整个项目框架后边文章我再说明.既然要起一个完整的项目,那么数据仓储访问就必不可少,这篇文章我主要介绍这个新项目(OSS.Core)中我对仓储 ...
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布动画
npm全局安装切换淘宝npm镜像 npm config set registry https://registry.npm.taobao.org全局安装 npm install -g @vue/cl ...
vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template><div id="app"><input type="button&q ...
使用Emit的TypeBUilder动态创建接口程序集的性能报告。
方案一: 使用RealProxy实现接口,并操作get.set 方案二: 使用Emit创建接口实现类,并使用DynamicMethod构造创建constructor,操作getset 方案三: 使用e ...
踩到一个Emit的坑，留个纪念
重现代码: var dmFoo = new DynamicMethod("Foo", typeof(void), Type.EmptyTypes); var ilFoo = dmF ...
vue $emit、$on、$refs简介
1.$emit 触发当前实例上的事件.附加参数都会传给监听器回调 ex: 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用"-"隔开子组件: < ...

说一说$emit和$on

一、$emit

二、$on

三、接下来我们通过一个实例来解释

说一说$emit和$on相关推荐

最新文章

热门文章