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>