Hören emited Ereignisse spezifischen Kind vuejs 2

Question

Das Haupttemplate Drop-Down-Namen hören muss, wird = „Dropdown-a“, Die eine Komponente Drop-Down-Namen hören muß, ist = „Drop-Down-b“ ... das Haupttemplate hören Dropdown b

Das Haupttemplate

<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

Sie haben nicht wirklich einen Bus benötigen. Senden Sie einfach das Ereignis und hören Sie es vom Elternteil an.

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>

Das obige Beispiel verwendet eine Taste anstelle von was auch immer Sie für ein Drop-Down-getan haben, aber das Prinzip ist das gleiche.

Sie sollten nur dann einen Bus verwenden, wenn ein bestimmter Bedarf besteht. Das obige Snippet sollte Ihr Standard sein. Senden Sie Ereignisse von Ihrer Komponente, und hören Sie diese Ereignisse mit v-on:some-event (die Abkürzung dafür ist @some-event).