说一说$emit和$on

一、$emit

1、this $emit('自定义时间名',要传送的数据);

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

二、$on

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

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

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

1、想要实现的

点击上一页、下一页,分别展现那页的内容。

数据刷新

废话不多说,上代码

以下是子组件

说一说$emit和$on_第1张图片
子组件部分代码
说一说$emit和$on_第2张图片
子组件js部分

父组件代码


说一说$emit和$on_第3张图片
父组件部分代码


说一说$emit和$on_第4张图片
父组件js部分

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

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

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

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

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

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

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

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

说一说$emit和$on_第5张图片
父组件在created里面定义$on监听事件在子组件中定义点击事件,调用父组件方法通过$emit将相应值传给父组件

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

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


说一说$emit和$on_第6张图片
bus全局


说一说$emit和$on_第7张图片
在子组件中通过$emit触发组件


说一说$emit和$on_第8张图片
在父组件中通过$on监听组件

你可能感兴趣的:(说一说$emit和$on)