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

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

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

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

方法一：使用 props 傳遞函數(shù)

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

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

方法二：使用自定義事件

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

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