vue.js - Vue 动态组件事件绑定(bind)

Question

我有一个动态组件，它使用记录的动态组件语法在运行时解析和绑定(bind)；

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

决定使用分配给安装的 Prop 。

无论出于何种原因，当动态呈现的子组件发出事件 this.$emit('eventName',/*someData*/) 时，父组件似乎听不到它。标准组件中使用的方法是否适用于那些动态呈现的组件？ Prop 似乎有效，所以也许我做错了什么？

Answer 1

是的，您可以将 Prop 与动态组件一起使用，只是您需要为 html 属性使用小写连字符(kebab-case)名称，即

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

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

new Vue({
    el: '#app',
    data: {
        currentComponent: 'foo',
        output: {},
    },
    methods: {
        onUpdate (payload) {
            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>