Связывание событий динамического компонента Vue

Question

У меня есть динамический компонент, который разрешен и привязан во время выполнения с использованием документированного синтаксиса динамических компонентов;

<div class="field"> 
    <component v-if="component" :is="component" @valueUpdated="onUpdate($event)"></component> 
</div> 

Решено использовать опору, назначенную на монтаж.

По какой-либо причине, когда дочерний компонент, визуализированный динамически, испускает событие this.$emit('eventName', /*someData*/), родитель, похоже, не слышит его. Является ли подход, используемый в стандартных компонентах применимым к тем, которые отображаются динамически? Кажется, что реквизит работает, так что, может быть, я не делаю что-то правильно?

Answer 1

да вы можете использовать реквизит с динамическими компонентами, это просто вам нужно использовать строчный дефис (кебаб регистр) имена для атрибута HTML, т.е.

<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>