Vue Dynamische Komponente Ereignisbindungen

Question

Ich habe eine dynamische Komponente, die zur Laufzeit mithilfe der dokumentierten dynamischen Komponentensyntax aufgelöst und gebunden wird;

Entschieden mit einer Stütze bei der Montage zugewiesen.

Aus irgendeinem Grund, wenn die Child-Komponente, dynamisch gerendert, ein Ereignis this.$emit('eventName', /*someData*/) ausstrahlt, scheint der Elternteil nicht in der Lage zu sein, es zu hören. Ist der in Standardkomponenten verwendete Ansatz für die dynamisch gerenderten Ansätze anwendbar? Requisiten scheinen zu funktionieren, also mache ich vielleicht etwas nicht richtig?

Answer 1

ja können Sie Requisiten mit dynamischen Komponenten verwenden es nur Sie Klein Bindestrich verwenden müssen (Kebab-Fall) Namen für die HTML-Attribut, das heißt

<component v-if="component" :is="component" @value-updated="onUpdate"></component> 

Vue.component('foo', { 
 
    template: ` 
 
\t \t <div> 
 
     \t <button @click="$emit('value-updated', { bar: 'baz' })">pass data</button 
 
     </div> 
 
    ` 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t currentComponent: 'foo', 
 
     output: {}, 
 
    }, 
 
    methods: { 
 
    \t onUpdate (payload) { 
 
     \t this.output = payload 
 
     } 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <component v-if="currentComponent" :is="currentComponent" @value-updated="onUpdate"></component> 
 
    <pre>{{ output }}</pre> 
 
</div>