Vue动态组件事件绑定

Question

我有一个动态组件，它使用文档中记录的动态组件语法在运行时解析并绑定；

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

使用在安装时分配的prop进行决定。

由于某种原因，当动态渲染的子组件发出事件this.$emit('eventName', /*someData*/)时，父组件似乎无法听到它。在动态渲染的组件中使用的方法是否适用于标准组件？Prop似乎起作用了，所以也许我做错了什么？

- Daniel Park

Answer 1

是的，您可以在动态组件中使用props，只需使用小写连字符（kebab-case）名称作为HTML属性即可，例如：

是的，你可以在动态组件中使用props，只需要为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>

- GuyC

---

更新的答案 - 不确定为什么我添加了prop示例，因为它在这里不相关 - 只需确保使用kebab case并发出事件名称：this.$emit('value-updated', { foo: 'bar' }) - GuyC

啊，我明白了。所以 Camel 和 Kebab 之间有翻译吗？我马上试一下，试完后会标记为答案。 - Daniel Park

请问为什么组件中有v-if="component"？ - Kick Buttowski

@KickButtowski 我将其调整为 v-if="currentComponent"，在上面的示例中更有意义，即在尝试实例化之前测试是否存在 currentComponent 字符串。 - GuyC