eventBus 与 this.$emit
1.使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue' export default new Vue();
2.在需要通信的两个组件中分别import
import bus from "common/utils/eventBus";
3.然后就可以通过emit、on进行通信:如下:
一个组件中发射 传送参数
bus.$emit('SUBMITSEARCH_PEOPLE',this.searchContent)
另一个组件中接收 接收参数
bus.$on('SUBMITSEARCH_PEOPLE', function (data) {...}
其中可能会遇到一个坑是$on()会触发多次,具体原因跟生命周期有关,详细分析可参考:
https://blog.csdn.net/chern1992/article/details/80392465
解决办法就是在beforeDestroy或destroy周期中将事件进行销毁,使用$off()
beforeDestroy () {
bus.$off('SUBMITSEARCH_PEOPLE')
},
原文:https://blog.csdn.net/qq_21132509/article/details/81505081
//子 this.$emit('fatherFunction',"参数") //父 <li @fatherFunction = "fathers"> methods:{ fathers(data){ //处理子传来的参数 } }