如何使用插槽在 Vue 中創建可重用的表單和輸入組件？

Question

首先，我想知道我在應用程序中使用的模式是否走在正確的軌道上。 創建可重用的BaseForm組件對我來說是否正確？

提出我的問題的另一種方法是：我如何根據我使用插槽包含的子組件動態地 model 父組件的數據？

我只是想為我的所有 forms 重新使用相同的提交處理程序。 提交處理程序應該使用action和method props 來確定如何配置axios ，並且請求正文將基於 BaseForm 組件中的BaseInput和BaseSelect組件是BaseForm的。

這是我的沙盒示例：

https://codesandbox.io/s/brave-chaplygin-9e5u2?file=/src/App.vue

我被困在BaseForm.vue的handleSubmit方法上。

我總是可以使用 vanilla JavaScript 序列化表單數據，但我覺得我應該用 Vue 的方式來做。 我歡迎任何意見和建議。 我是這個框架的新手，所以我可能完全錯了。

Answer 1

首先，您通過 function 道具將事件處理程序傳遞給子組件。 但它更常見於 React，而不是 Vue。
在 Vue 中，您應該只發出事件並在父組件中處理它們。 在此處閱讀更多相關信息。
如果你想創建可重用的表單組件，最簡單的方法之一就是使用插槽。 您應該使用按鈕（取消/提交等）創建空表單並為其添加事件。
然后你應該只將輸入傳遞給插槽，僅此而已。
工作示例：

https://codesandbox.io/s/charming-mclean-05jw7?file=/src/App.vue

Answer 2

我只需在<form>上放置一個模板ref ，並用它創建一個FormData ，它將在其默認插槽中包含所有名為<input>的表單：

<form ref="form">...</form>

const formData = new FormData(this.$refs.form)

演示

Answer 3

謝謝大家的回復。 關於如何做到這一點的答案太復雜了，不值得為我的用例做。

我仍然有可重用的表單輸入組件，但是擁有一個可重用的父表單組件和一個可重用的表單提交處理程序並不是 go 的方法。 即使保持干燥會很好，但我認為解決方案會過度設計（如果可能的話）。

這是我的最終結果： https://codesandbox.io/s/romantic-almeida-wpxbw?file=/src/App.vue