Vue.js 父組件如何監聽mixin賦能的子組件表單變化？

在 vue.JS 應用中，有效利用 mixin 可以提升代碼復用性。本文將探討一種最佳實踐，即如何在父組件中使用 mixin 并高效監聽子組件表單變化。

場景：父組件（例如，數據記錄列表頁面）包含子組件 C（搜索表單），并通過 Mixin searchFormMemory 為子組件 C 添加表單數據記憶功能（保存表單值，頁面刷新前序列化，刷新后反序列化）。 關鍵在于如何讓父組件感知子組件 C 表單數據的變化。

直接在 searchFormMemory Mixin 中監聽子組件表單變化并非最佳方案，因為這仍然是父組件監聽子組件行為的問題。 更清晰、更易維護的解決方法是使用 props 和函數的組合，或子組件自定義事件。

方法一：使用 props 傳遞函數

父組件將一個函數作為 props 傳遞給子組件 C。子組件 C 的表單值發生變化時，調用該函數，并將新值作為參數傳遞回父組件。這種方法簡潔直接，易于理解和維護。

立即學習“前端免費學習筆記（深入）”；

方法二：使用自定義事件

子組件 C 在表單值變化時，觸發一個自定義事件。父組件監聽該事件并接收新的表單值。這種方法更符合 vue.js 的事件驅動模式，代碼結構更清晰。

這兩種方法都優于在 Mixin 中直接監聽子組件表單變化，它們更清晰、更易于維護，并且更符合 Vue.js 的最佳實踐。 通過這兩種方法，父組件可以有效地獲取子組件表單的變化，從而實現預期的功能。