如何監聽Vue的插槽變化？試試這一招！

前端（vue）入門到精通課程：進入學習
API 檔案、設計、偵錯、自動化測試一體化共同作業工具：

最近，每當元件的內容(插槽、子元件等)發生變化時，我需要更新它的狀態。對於上下文，它是一個表單元件，用於跟蹤其輸入的有效性狀態。

下面的程式碼片段是以Options API格式編寫的，但除了指定的地方外可以在Vue2 和 Vue2中使用。【相關推薦：】

開始

先從控制表單狀態開始，根據狀態修改一個類，孩子內容使用<slot/>填充：

為了更新isInvalid屬性，我們需要新增一個觸發的事件，可以使用 sumit 事件 ，但我更喜用 input 事件。

表單事件7個: focus, blur, input, select, change, reset, submit 等，具體詳解看這篇文章：https://blog.csdn.net/qq_4379...

表單不會觸發 input 事件，但我們可以使用 "事件委託"。我們將監聽器附加到父元素（<form>）上，當事件發生在它的子元素（<input>、<select>、<textarea>等）上時就會被觸發。

任何時候在這個元件的<slot>中觸發input事件，表單將捕獲該事件。

驗證邏輯可以是簡單或複雜的。本文為了演示，用簡單的方法，使用form.checkValidity() API 來檢視表單是否基於HTML驗證屬性而有效。

為了存取<form>元素。可以用refs或$el屬性。為了簡單起見，本文使用$el。

問題

這裡有一點問題。如果表單的內容改變了，會發生什麼？如果一個<input>在表單載入被新增到DOM中，會發生什麼？

舉個例子，我們把這個表單元件稱為 "MyForm"，在 App 中，內容如下：

// App.vue

當App.vue通過條件來隱藏顯示某些 input，我們的表單需要知道。在這種情況下，我們會想到在表單內容發生變化時跟蹤其有效性，而不僅僅是在 input 事件或mounted生命週期勾點上。否則，可能會顯示不正確的資訊。

熟悉 Vue的生命週期勾點小夥伴，這裡可能會想到使用 update 來跟蹤變化。理論上，這聽起來不錯。在實踐中，它會創造一個無限的迴圈，然後瀏覽器掛了。

解決方法

經過一番研究和測試，最佳解決方案是使用MutationObserver API。它是瀏覽器內建的方法，提供了監視對DOM樹所做更改的能力，如果節點的增減、屬性的變動、文字內容的變動，這個 API 都可以得到通知。

它是原生的方法，所以不受限於框架。

使用時，首先使用MutationObserver建構函式，新建一個觀察器範例，同時指定這個範例的回撥函數。在每次 DOM 變動後呼叫，這個回撥都被呼叫。該回撥函數接受兩個引數，第一個是變動陣列，第二個是觀察器範例，將我們的 form 元件改寫成如下：

這裡還需要使用 beforeUnmount生命週期事件來斷開observer的連線，這會清除它所分配的任何記憶體。

最後，我們將isInvalid狀態傳遞給要存取的內容的外掛槽，這也稱作用域的槽，它非常有用。

通過這樣的設定，可以在我們的表單元件中新增任意數量的 input，並新增任何它需要的條件渲染邏輯。只要input使用HTML驗證屬性，表單就會跟蹤它是否處於有效狀態。

此外，由於使用的是作用域槽，我們將表單的狀態提供給父級，所以父級可以對有效性的變化做出反應。

例如，在 App.vue，我們想在表單無效時 "禁用" 提交按鈕，可以這麼來寫

nice~.

希望本文能對你未來的開必有所幫助。

（學習視訊分享：、）

以上就是如何監聽Vue的插槽變化？試試這一招！的詳細內容，更多請關注TW511.COM其它相關文章！