新聞中心
最近,每當組件的內(nèi)容(插槽、子組件等)發(fā)生變化時,我需要更新它的狀態(tài)。對于上下文,它是一個表單組件,用于跟蹤其輸入的有效性狀態(tài)。

公司主營業(yè)務(wù):網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)公司推出陵城免費做網(wǎng)站回饋大家。
下面的代碼片段是以O(shè)ptions API格式編寫的,但除了指定的地方外可以在Vue2 和 Vue2中使用。
開始
先從控制表單狀態(tài)開始,根據(jù)狀態(tài)修改一個類,孩子內(nèi)容使用 填充:
為了更新isInvalid屬性,我們需要添加一個觸發(fā)的事件,可以使用 sumit 事件 ,但我更喜用 input 事件。
- 表單事件7個: focus, blur, input, select, change, reset, submit 等,具體詳解看這篇文章:
- https://blog.csdn.net/qq_43797996/article/details/103066452
表單不會觸發(fā) input 事件,但我們可以使用 "事件委托"。我們將監(jiān)聽器附加到父元素(
驗證邏輯可以是簡單或復雜的。本文為了演示,用簡單的方法,使用form.checkValidity() API 來查看表單是否基于HTML驗證屬性而有效。
為了訪問
問題
這里有一點問題。如果表單的內(nèi)容改變了,會發(fā)生什么?如果一個在表單加載被添加到DOM中,會發(fā)生什么?
舉個例子,我們把這個表單組件稱為 "MyForm",在 App 中,內(nèi)容如下:
- // App.vue
- v-model="showInput"
- id="toggle-name"
- name="toggle-name"
- type="checkbox"
- />
當App.vue通過條件來隱藏顯示某些 input,我們的表單需要知道。在這種情況下,我們會想到在表單內(nèi)容發(fā)生變化時跟蹤其有效性,而不僅僅是在 input 事件或mounted生命周期鉤子上。否則,可能會顯示不正確的信息。
熟悉 Vue的生命周期鉤子小伙伴,這里可能會想到使用 update 來跟蹤變化。理論上,這聽起來不錯。在實踐中,它會創(chuàng)造一個無限的循環(huán),然后瀏覽器掛了。
解決方法
經(jīng)過一番研究和測試,最佳解決方案是使用MutationObserver API。它是瀏覽器內(nèi)置的方法,提供了監(jiān)視對DOM樹所做更改的能力,如果節(jié)點的增減、屬性的變動、文本內(nèi)容的變動,這個 API 都可以得到通知。
它是原生的方法,所以不受限于框架。
使用時,首先使用MutationObserver構(gòu)造函數(shù),新建一個觀察器實例,同時指定這個實例的回調(diào)函數(shù)。在每次 DOM 變動后調(diào)用,這個回調(diào)都被調(diào)用。該回調(diào)函數(shù)接受兩個參數(shù),第一個是變動數(shù)組,第二個是觀察器實例,將我們的 form 組件改寫成如下:
這里還需要使用 beforeUnmount生命周期事件來斷開observer的連接,這會清除它所分配的任何內(nèi)存。
最后,我們將isInvalid狀態(tài)傳遞給要訪問的內(nèi)容的插件槽,這也稱作用域的槽,它非常有用。
通過這樣的設(shè)置,可以在我們的表單組件中添加任意數(shù)量的 input,并添加任何它需要的條件渲染邏輯。只要input使用HTML驗證屬性,表單就會跟蹤它是否處于有效狀態(tài)。
此外,由于使用的是作用域槽,我們將表單的狀態(tài)提供給父級,所以父級可以對有效性的變化做出反應(yīng)。
例如,在 App.vue,我們想在表單無效時 "禁用" 提交按鈕,可以這么來寫
nice~.
希望本文能對你未來的開必有所幫助。
本文題目:用這招監(jiān)聽Vue的插槽變化
路徑分享:http://fisionsoft.com.cn/article/djjodii.html


咨詢
建站咨詢
