如何在功能性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組件中發出事件

回答

相關問題