Vue.js Vue 动态组件事件绑定

发布于11月29日

我有一个动态组件，它在运行时使用文档化的动态组件语法进行解析和绑定；

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

决定在安装时使用指定的props .

无论出于何种原因，当动态渲染的子组件发出事件this.$emit('eventName', /*someData*/)时，父组件似乎无法听到它.标准组件中使用的方法是否适用于动态渲染的组件？props 似乎很管用，所以也许我做得不对？

推荐答案

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