javascript - 使用 this.$root.$emit 调用事件总线

Question

我有一个简单的事件总线，可以更改页面上的样式并且它可以工作。使用事件总线的名称以及 $emit 和 $on 调用事件总线:

EventBus.$on

和

EventBus.$emit('call-modal', { type: 'success' });

我怎样才能不使用 $on 和 $emit 调用它，而可以使用 this.$root.$emit 调用它code> 以便我可以在其他所有组件中使用它？我尝试过，但目前不起作用，为什么？

这是我的 App.vue:

<template >
  <div id="app">
    <bankAccount>
    </bankAccount> 
    <div :class="['modal', `modal--type--${modalType}`]" v-show="showModal">
    <slot name="title">e</slot>
    <slot name="description"></slot>
    </div>
  </div>
</template>

<script>
import bankAccount from './components/bankAccount.vue'
import Vue from 'vue'
export const EventBus = new Vue()

export default {
  name: 'app',
  components: {
    bankAccount,
  },
  data() {
    return {
      showModal: false,
      modalType: 'default',
    }
  },
  created() {
    EventBus.$on('call-modal', obj => {
      this.showModal = true
      this.modalType = obj.type
    })
  },
}
</script>

<style>
.modal {
  height: 100px;
  width: 300px;
  border: solid gray 2px;
}

.modal--type--success {
  border-color: green;
}

.modal--type--danger {
  border-color: red;
  width: 100%;
}

.modal--type--warning {
  border-color: yellow;
  width: 100%;
}
</style>

还有我的组件:

<template>
  <div>
   <button class="pleeease-click-me" @click="callModal()">Click me</button>
  </div>
</template>

<script>
import { EventBus } from '../App.vue';


export default {
  name: 'bankAccount',
  data() {
    return {
      showModal: false
    }
  },
   methods: {
    callModal() {
      this.showModal = !this.showModal
     EventBus.$emit('call-modal', { type: 'success' });

    }
  }
}

</script>

<style scoped>

.modal {
  height: 100px;
  width: 300px;

}
</style>

Answer 1

您可以创建一个单独的 eventbus.js 文件并将其包含到您的所有组件中。这样，他们将使用相同的事件总线实例。 TL;DR:这里已经解释过:

https://alligator.io/vuejs/global-event-bus/

长一个:

使用以下内容创建一个 eventbus.js 文件:

import Vue from 'vue';
export const EventBus = new Vue();

然后包含它:

import { EventBus } from './event-bus.js';

然后使用它:

EventBus.$on("event", function(data){
    // do stuff with data
});

与

EventBus.$emit("event", data);

并且不要忘记删除销毁事件:

beforeDestroy {
     EventBus.$off("event");
}