bugfix> events > 投稿
<template id="parentComp">
<child-comp-1 @customEvent="handler"/>
<child-comp-2 @customEvent="handler"/>
</template>

私は同じイベントを受け取り、両方のイベントに同じイベントハンドラを使用するので、それらを共通にリッスンする方法はありますか?つまり、イベントをネイティブイベントのようにバブルアップさせて、

<template id="parentComp" @customEvent="handler">

回答 2 件
  • イベントを親に渡すだけでなく、イベントバスを使用できます。この記事では、この原則について詳しく説明しています:https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

    アイデアは、共有Vueインスタンスを使用してイベントを処理することです。次に、ライブラリをインポートするのと同じ方法で、このインスタンスを異なる要素にインポートします。

  • イベントバブリングに$listenersを使用できます。例を挙げてください

    Vue.component('inner-com',{
      template: '<div>inner component<button @click="innerClick">emit event</button></div>',
      methods: {
        innerClick () {
          this.$emit('inner-com-click-event');
        }
      }
    })
    Vue.component('middle-com',{
      template: '<div>middle component<inner-com v-on="$listeners"></inner-com></div>'
    })
    Vue.component('outer-com',{
      template: '<div>outer component<middle-com v-on="$listeners"></middle-com></div>'
    })
    
    var app = new Vue({
      el:'#app',
      methods: {
        eventHandler () {
          alert('event receved')
        }
      }
    })
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <div id="app">
      <outer-com @inner-com-click-event="eventHandler"></outer-com>
    </div>
    
    

あなたの答え