Question

所以在我的根app.js中我有

window.Vue = require('vue');
const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
    $bus: {
       get: function () {
        return EventBus
      }
   }
})

const app = new Vue({
 el: '#backend',
 EventBus,
 components: {
    FirstComponent
  }
});

现在在第一个组件

<script>

  clickbtn(){
      this.$bus.$emit('test', { "testval":"setting up event bus" })
   }
  components:{
   ChildComponent //local component

   }


 </script>

子组件上没有

<script>
   created(){
        this.$bus.$on('test', ($event) => {
            console.log('Test event triggered', $event)
        })
   }

</script>

我在设置中出错了，因为即使console.log(this)也没有$ bus。

我关注This to setup

我仍然想使用$ bus，因为它看起来很好并且有条不紊。我如何实现它。

Answer 1

我通常使用EventBus进行分离。

<强> eventbus.js

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

然后我只需要在每个需要监听事件的组件中进行导入。在更大的项目中，我甚至会创建一个events.js和eventListener.js文件，然后处理那里的所有内容。

完全分离

<强> eventbus.js

这将是我们的活动巴士，并在所有其他地方使用。

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

<强> event.js

这个文件基本上是一个常见事件库。这使得维护更容易。

import { EventBus } from './Eventbus.js';
import { Store } from './Store.js'; // If needed

class Event {

    // Simple event
    static showMessage(message) {
        EventBus.$emit('showMessage', message);
    }
}

<强> eventlistener.js

我们常见事件的事件监听器。这再次使其更容易维护。这可能在同一个事件文件中，但我喜欢分离。

import { EventBus } from './Eventbus.js';

class EventListener {

    // Simple event listener
    static showMessage() {
        EventBus.$on('showMessage', function() {
            alert(message);
        });
    }

    // Simple event listener with callback
    static showMessage(callbackFunction) {
        EventBus.$on('showMessage', callbackFunction);
    }
}

<强> ComponentA.vue

随机组件。导入EventBus和Event集合，因为它在vue组件中的某处使用。

<template>
    *SOME HTML*
</template>

<script>

    import { Event } from 'event.js'
    import { EventBus } from 'eventbus.js';

    export default {
        methods: {
            throwAlert: function() {
                Event.showMessage('This is my alert message');
            }
        }
    }
</script>

<强> ComponentB.vue

随机组件。导入EventBus和EventListener集合，因为它假设对事件总线上的事件做出反应。

<template>
    *SOME HTML*
</template>

<script>

    import { EventListener } from 'eventlistener.js'
    import { EventBus } from 'eventbus.js';

    export default {
        mounted() {

            // Will start listen for the event 'showMessage' and fire attached function defined in eventlistener.js
            EventListener.showMessage();

            // Will start listen for the event 'showMessage' and execute the function given as the 'callbackFunction' parameter. This will allow you to react on the same event with different logic in various vue files.
            EventListener.showMessage(function(message) {
                alert(message);
            });
        }
    }
</script>

Vuejs设置活动巴士

1 个答案:

完全分离