Eltern-Kind-Kommunikation in VueJS

Question

Ich habe zwei Vue-Komponenten. Die parent-component:

Vue.component('parent-component',{ 
     methods: { 
      test: function(){ 
      alert('Option Selected'); 
      } 
     }, 
     template: ` 
      <div><slot></slot></div> 
     ` 
}); 

Und die animals Komponente:

Vue.component('animals',{ 
     data: function(){ 
      return { 
       selected: '' 
      } 
     }, 
     template: ` 
      <select @change="selectionChanged" v-model="selected"> 
       <slot></slot> 
      </select> 
     `, 
     methods: { 
      selectionChanged: function(){ 
       this.$emit('optionselected', this.selected); 
      } 
     } 
}); 

Und hier ist mein HTML:

<div id="app"> 
     <parent-component @optionselected="test()"> 
      <animals> 
       <option>Aardvark</option> 
       <option>Bear</option> 
       <option>Cat</option> 
      </animals> 
     </parent-component> 
</div> 

Ich versuche, die ausgewählte Option aus geordnete Komponente zu erhalten (animals) zu die Hauptkomponente (parent-component). Ich emittiere das optionselected Ereignis vom Kind, aber es sieht so aus, als ob die Elternkomponente nicht auf dieses Ereignis reagiert, ich meine, die Methode test() wird überhaupt nicht aufgerufen. Was mache ich hier falsch?

Hier die ist JSFiddle Demo

Answer 1

Zuerst müssen Sie den Hörer auf die animals Komponente in Ihrer Vorlage hinzuzufügen.

<animals @optionselected="test"> 

Zweitens ist es wichtig, sich daran zu erinnern, dass, weil Sie Schlitze verwenden, die Elemente innerhalb der Schlitze in den Rahmen der Komponente in dem sie definiert sind ausgewertet werden werden. In diesem Fall ist dieser Bereich der Gültigkeitsbereich von Vue, nicht der Bereich parent-component. Damit die in einem Slot definierten Elemente die Daten, Methoden usw. der enthaltenen Komponenten verwenden können, müssen Sie eine scoped slot definieren. Wenn das der Fall, Ihre Mutter Komponente enden würde wie folgt aussehen:

<div><slot :test="test"></slot></div> 

Und Ihre Vue Vorlage wird

<parent-component> 
    <template scope="{test}"> 
    <animals @optionselected="test"> 
     <option>Aardvark</option> 
     <option>Bear</option> 
     <option>Cat</option> 
    </animals> 
    </template> 
</parent-component> 

Hier ist der aktualisierte Code.

console.clear() 
 
Vue.component('parent-component', { 
 
    methods: { 
 
    test: function(option) { 
 
     alert('Option Selected ' + option); 
 
    } 
 
    }, 
 
    template: ` 
 
      <div><slot :test="test"></slot></div> 
 
     ` 
 
}); 
 
Vue.component('animals', { 
 
    data: function() { 
 
    return { 
 
     selected: '' 
 
    } 
 
    }, 
 
    template: ` 
 
      <select @change="selectionChanged" v-model="selected"> 
 
       <slot></slot> 
 
      </select> 
 
     `, 
 
    methods: { 
 
    selectionChanged: function() { 
 
     this.$emit('optionselected', this.selected); 
 
    } 
 
    } 
 
}); 
 
new Vue({ 
 
    el: "#app", 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <parent-component> 
 
    <template scope="{test}"> 
 
     <animals @optionselected="test"> 
 
     <option>Aardvark</option> 
 
     <option>Bear</option> 
 
     <option>Cat</option> 
 
     </animals> 
 
    </template> 
 
    </parent-component> 
 
</div>