구성 요소에서 이벤트를 수신하는 vuejs

Question

플래시 이벤트를 콘솔에서 방출하는 사용자 지정 구성 요소에서 수신 할 수 없습니다. 내가 함께 이벤트를 발사하고있는 크롬 콘솔

/* file flash.vue */ 

<template> 
    <span :class="type" class="alert flash-alert" v-show="show"> 
    {{ body }} 
    </span> 
</template> 

<script> 
    export default { 
    props: ['type','message'], 
    data() { 
     return { 
      body: this.message, 
      show: false, 
     }; 
    }, 

    created() { 
     if(this.body) 
     { 
      this.showComp(); 
      this.hide(); 
     } 
    }, 

    methods: { 
     showComp: function(){ 
      this.show = true; 
     }, 

     hide: function() 
     { 
      var vm = this; 
      setTimeout(function() { 
       vm.show = false; 
      },2000); 
     }, 
    }, 

    events: { 
     flash: function(newMessage) { 
      this.body = newMessage; 
      this.showComp(); 
     }, 
    } 
} 

: 여기 내 구성 요소입니다 내가 VUE에 그것을 볼 수있는 이벤트가 발사됩니다

/* from console */ 
window.vueEventBus = new Vue(); 
window.vueEventBus.$emit('flash','my message'); 

탭을 DevTools로. 그러나 이벤트를 포착 할 때 구성 요소가 표시되어야합니다.

그러나 글로벌 이벤트 버스에서 청취자를 created() 메소드 내부에 피기 백하면 작동합니다.

created() { 
    window.vueMessageBus.$on('flash',newMessage => { 
     this.body = newMessage; 
     this.showComp(); 
    }); 
} 

내가 이벤트 리스너가 이벤트 내부의 구성 요소 자체의 속성을 등록하려면 어떻게해야합니까?

고마워요

, Yeasir

Answer 1

모습 하는 index.js (요소를 참조/eventBus/eventBus.vue)

에

Vue.prototype.$vueEventBus = new Vue() 

수신기에서 생성이 example

eventbus

created() { 
    this.$vueEventBus.$on('message-in', this.newMessage) 
}, 
beforeDestroy() { 
    this.$vueEventBus.$off('message-in') 
} 

방출 이벤트

methods: { 
    newMessage(something) { 
    this.$vueEventBus.$emit('message-in', something) 
    } 
} 

앱 페이지 (/ eventBus/childEventBus.vue구성 요소 참조) https://3xyx386q65.codesandbox.io/eventBus