vue如何主动销毁子组件_Vue自动销毁的vue event Bus

我们通常在使用非父子组件间通信时，采用new Bus()的方式来做一个事件广播。 但一个弊端就是，这种方式并不会自动销毁，所以为了避免回调函数重复执行，还要在destroyed周期中去做Bus.$off('event name', fn)的操作。

这样带来的冗余代码就是:$on 的回调函数必须是具名函数。不能简单的Bus.$on('event name', () => {})使用匿名函数作为回调了，所以需要将回调函数放到metheds中进行额外的声明

在destroyed生命周期中去销毁事件的监听。

我只是想在某个路由中监听下 header 中一个按钮的点击事件而已，竟然要这么麻烦？？？

所以此轮子被造出来了 ?。

它主要解决在非父子组件间通信时，解决重复绑定事件、无法自动销毁的而导致回调函数被执行多次的问题。

总得来说他是能让你偷懒少写代码的工具。

import Vue$ from 'vue'

let Vue = Vue$

if (typeof window !== 'undefined' && window.Vue) {

Vue = window.Vue

}

// 记录所有的事件类型与事件函数

const EventStore = {}

const Bus = new Vue()

// 移除所有事件的方法

const destroyHandler = function () {

// this 为调用此方法的vue组件

const currentEventOb