一、$emit
1、this $emit('自定义时间名',要传送的数据);
2、触发当前实例上的时间,要传递的数据会传给监听器;
二、$on
1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据;
2、监听当前实例上自定义时间;
三、接下来我们通过一个实例来解释
1、想要实现的
点击上一页、下一页,分别展现那页的内容。
废话不多说,上代码
以下是子组件
父组件代码
首先简单的点击事件不同去过多的描述,使用v-on:click就可以了,然后在methods里写上判断就可以实现了。
简单来说,就是子组件pagination想要传递curpage给父组件tabs,父组件需要接收到curpage并且要告知子组件,不然子组件完全不知道。
这里需要强调的一点是:on和emit事件必须是在一个公共的实例上才能触发。
子组件说:父组件你挺好了,我用$eimt把数据传给你啊,你记得看看有没有拿到啊。
父组件说:好的,不怕,我有$on这个东东,我可以随时监听到你传了啥,你传给我什么,我就变成什么呗,没办法,你传给我的,我是要跟随你的。
旁白:但是你们两必须得在一个世界啊,别一个在二次元,一个在三次元,那样没法传啊。这样吧,你们都必须保证在同一个地方吧。
子组件:好,那我这边有一个bus,父组件那也有一个bus,那我们两都到那吧。
旁白:一定要记住你们可以使用一个空的 Vue 实例作为中央事件总线。毕竟性别不同怎么谈恋爱啊。
网上百度千篇一律全是使用$emit来实现,可是都有一个严重的误区没有给别人说明,开始我都按照搜索的结果进行操作,都会出现子组件$emit后父组件没有监听到函数的变化,研究了好久才发现$emit和$on的事件必须在一个公共的实例上,才能够触发。我的操作如下:
首先在main.js里新加bus作为一个公共的实例,如下图