Question

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

EventBus.$on

和

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

我该如何做，而不是用$on和$emit来调用，而不能用this.$root.$emit来调用，以便可以在其他所有组件中使用它？我尝试过，但目前不起作用，为什么？

这是我的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

只需将其添加到实例原型中即可：

using UnityEngine;
public class InNewScene : MonoBehaviour {

    // Use this for initialization
    void Start () {
        var saveData = FindObjectOfType<SaveDataHere>();
        Debug.Log("instance data is " + saveData.myData);
        Debug.Log("static data is " + SaveDataHere.staticData);
    }
}

现在您可以通过：

在任何组件上使用它

// main.js
//import vue from 'vue'

Vue.prototype.$eventHub = new Vue(); 


// new Vue({
//    ...
//  })

Answer 2

要获得所需的结果，您必须稍微更改代码。在您的App.vue中，更改以下代码行：

created() {
  this.$root.$on('call-modal', obj => {
    this.showModal = true
    this.modalType = obj.type
  })
},

然后在您的组件中：

callModal() {
  this.showModal = !this.showModal
  this.$root.$emit('call-modal', { type: 'success' })
}

通知，@ Dadboz建议的方法比您期望的要好。

Answer 3

您可以创建一个单独的eventbus.js文件，并将其包含在所有组件中。这样，他们将使用相同的eventbus实例。 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");
}

使用this。$ root。$ emit调用事件总线

3 个答案: