说一说$emit和$on

1、$emit

一、this $emit（'自定义事件名',要传送的数据）；

二、触发当前实例上的事件，要传递的数据会传给监听器；

2、$on

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

二、监听当前实例上自定义事件；

3、接下来咱们经过一个实例来解释

一、想要实现的

点击上一页、下一页，分别展示那页的内容。

数据刷新

废话很少说，上代码

如下是子组件

子组件部分代码

子组件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监听组件