特定の子vuejsのイベントを聴いてください2

Question

メインテンプレートはドロップダウンリストの名前= "ドロップダウンa"、 を聞く必要がありますいくつかのコンポーネントはドロップダウン名を聞く必要があります= "ドロップダウンb" ... メインテンプレートリスニングドロップダウンB

メインテンプレート

<main-template> 
     <dropdown name="dropdown a"></dropdown> 
     <some-component> 
      <dropdown name="dropdown b"></dropdown> 
     </some-component> 
</main-template> 

Vue.component('dropdown', { 
    template: '#dropdown-template', 
    methods:{ 
    selectedItem: function(){ 
     bus.$emit('selected-item'); 
    } 
    } 
}); 

Vue.component('some-component', { 
    template: '#some-component-template', 
    mounted:function(){ 
    bus.$on('selected-item',this.onItemSelected) 
    //I want to listen dropdown b 
    }, 
    methods:{ 
    onItemSelected : function(item){ 

    } 
    } 
}); 

new Vue({ 
    el: '#main-template', 
    mounted:function(){ 
    bus.$on('selected-item',this.onItemSelected) 
     //I want to listen dropdown a 
    }, 
    methods:{ 
    onItemSelected : function(item){ 

    } 
    } 

}) 

Answer 1

あなたは本当にバスを必要としません。イベントを放つだけで、親から聞くことができます。

console.clear() 
 

 
Vue.component('dropdown', { 
 
    template: `<button @click="selectedItem">Emit</button>`, 
 
    methods:{ 
 
    selectedItem: function(){ 
 
     this.$emit('selected-item'); 
 
    } 
 
    } 
 
}); 
 

 
Vue.component('some-component', { 
 
    template: ` 
 
    <div> 
 
     <h1>Some Component</h1> 
 
     <dropdown @selected-item="onItemSelected"></dropdown> 
 
    </div>`, 
 
    methods:{ 
 
    onItemSelected : function(item){ 
 
     alert("dropdown b!") 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#main-template', 
 
    methods:{ 
 
    onItemSelected : function(item){ 
 
     alert("dropdown a!") 
 
    } 
 
    } 
 

 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="main-template"> 
 
     <h1>Main</h1> 
 
     <dropdown @selected-item="onItemSelected" name="dropdown a"></dropdown> 
 
     <some-component></some-component> 
 
</div>

上記の例では、ドロップダウンのために行っているものは何でもの代わりにボタンを使用していますが、原理は同じです。

特定の必要がある場合にのみバスを使用してください。上記のスニペットはのデフォルトのである必要があります。 のコンポーネントからイベントを送信し、v-on:some-event（ショートカットは@some-event）を使用してイベントを待機します。