如何在功能性Vuejs组件中发出事件

我编写了一个functional component，它为某些条件编译表单域。表单域是它们自己的组件。所以，我有三个层次：如何在功能性Vuejs组件中发出事件

<FormComponent>   // handles input events 
    <FunctionalComponent> // selects form fields 
    <FormFieldComponent> // emits input events 
    </FunctionalComponent> 
</FormComponent>

功能组件没有this，却得到了一个上下文对象作为参数传递给渲染功能。我能做的是使用context.data.on[eventName](event)或一些类似的构造。我也知道我可以直接使用事件总线或dom元素，如描述here。

这一切对我来说都很肮脏。功能组件中是否有任何this.$emit相等？

来源

2017-06-01 koehr

你是说你想让你的FunctionalComponent将你的FormFieldComponent中的事件传播到你的FormComponent？ –

https://github.com/vuejs/vue/issues/3348 –

是的，就是这样！我花了一分钟的时间来围绕它，但这应该解决我的问题。非常感谢@RoyJ – koehr

感谢@RoyJ的评论，我能解决我的问题。此处适用于所有可能面临相同问题的人：

如github issue所述，render函数的第二个参数具有包含所有侦听器等的数据对象。所以，最简单的办法就是干脆直接给它的子组件：

render(h, context) { 
    return h(FormFieldComponent, context.data, children) 
}

在我的特定情况下，我只能直接拿听众，因为我操纵数据对象的大部分地区：

render(h, context) { 
    const data = createDataObject() 
    data.on = context.data.on 

    return h(FormFieldComponent, data, children) 
}

来源

2017-06-02 09:09:22 koehr

如何在功能性Vuejs组件中发出事件

回答

相关问题