用這招監聽 Vue 的插槽變化
最近，每當組件的內容(插槽、子組件等)發生變化時，我需要更新它的狀態。對于上下文，它是一個表單組件，用于跟蹤其輸入的有效性狀態。
下面的代碼片段是以Options API格式編寫的，但除了指定的地方外可以在Vue2 和 Vue2中使用。
開始
先從控制表單狀態開始，根據狀態修改一個類，孩子內容使用
- <template>
- <form :class="{ '--invalid': isInvalid }">
- <slot />
- </form>
- </template>
- <script>
- export default {
- data: () => ({
- isInvalid: false,
- }),
- };
- </script>
為了更新isInvalid屬性，我們需要添加一個觸發的事件，可以使用 sumit 事件 ，但我更喜用 input 事件。
- 表單事件7個: focus, blur, input, select, change, reset, submit 等，具體詳解看這篇文章：
- https://blog.csdn.net/qq_43797996/article/details/103066452
表單不會觸發 input 事件，但我們可以使用 "事件委托"。我們將監聽器附加到父元素(<form>)上，當事件發生在它的子元素（<input>、<select>、<textarea>等）上時就會被觸發。
任何時候在這個組件的<slot>中觸發input事件，表單將捕獲該事件。
- <template>
- <form :class="{ '--invalid': isInvalid }" @input="validate">
- <slot />
- </form>
- </template>
- <script>
- export default {
- data: () => ({
- isInvalid: false,
- }),
- methods: {
- validate() {
- // 驗證邏輯
- }
- }
- };
- </script>
驗證邏輯可以是簡單或復雜的。本文為了演示，用簡單的方法，使用form.checkValidity() API 來查看表單是否基于HTML驗證屬性而有效。
為了訪問<form>元素。可以用refs或$el屬性。為了簡單起見，本文使用$el。
- <template>
- <form :class="{ '--invalid': isInvalid }" @input="validate">
- <slot />
- </form>
- </template>
- <script>
- export default {
- data: () => ({
- isInvalid: false,
- }),
- methods: {
- validate() {
- this.isInvalid = !this.$el.checkValidity()
- }
- }
- };
- </script>
問題
這里有一點問題。如果表單的內容改變了，會發生什么?如果一個<input>在表單加載被添加到DOM中，會發生什么?
舉個例子，我們把這個表單組件稱為 "MyForm"，在 App 中，內容如下：
- // App.vue
- <template>
- <MyForm>
- <input
- v-model="showInput"
- id="toggle-name"
- name="toggle-name"
- type="checkbox"
- />
- <label for="toggle-name">顯示其它 input</label>
- <template v-if="showInput">
- <label for="name">Name:</label>
- <input id="name" name="name" required />
- </template>
- <button type="submit">提交</button>
- </MyForm>
- </template>
- <script>
- import Form from "./components/form.vue";
- export default {
- name: "App",
- components: {
- MyForm: Form,
- },
- data: () => ({
- showInput: false,
- }),
- };
- </script>
當App.vue通過條件來隱藏顯示某些 input，我們的表單需要知道。在這種情況下，我們會想到在表單內容發生變化時跟蹤其有效性，而不僅僅是在 input 事件或mounted生命周期鉤子上。否則，可能會顯示不正確的信息。
熟悉 Vue的生命周期鉤子小伙伴，這里可能會想到使用 update 來跟蹤變化。理論上，這聽起來不錯。在實踐中，它會創造一個無限的循環，然后瀏覽器掛了。
解決方法
經過一番研究和測試，最佳解決方案是使用MutationObserver API。它是瀏覽器內置的方法，提供了監視對DOM樹所做更改的能力，如果節點的增減、屬性的變動、文本內容的變動，這個 API 都可以得到通知。
它是原生的方法，所以不受限于框架。
使用時，首先使用MutationObserver構造函數，新建一個觀察器實例，同時指定這個實例的回調函數。在每次 DOM 變動后調用，這個回調都被調用。該回調函數接受兩個參數，第一個是變動數組，第二個是觀察器實例，將我們的 form 組件改寫成如下：
- <template>
- <form :class="{ '--invalid': isInvalid }" @input="validate">
- <slot />
- </form>
- </template>
- <script>
- export default {
- data: () => ({
- isInvalid: false,
- }),
- mounted() {
- const observer = new MutationObserver(this.validate);
- observer.observe(this.$el, {
- childList: true,
- subtree: true,
- });
- this.observer = observer;
- },
- methods: {
- validate() {
- this.isInvalid = !this.$el.checkValidity();
- },
- },
- beforeUnmount() {
- this.observer.disconnect();
- },
- };
- </script>
- <style scoped>
- </style>
這里還需要使用 beforeUnmount生命周期事件來斷開observer的連接，這會清除它所分配的任何內存。
最后，我們將isInvalid狀態傳遞給要訪問的內容的插件槽，這也稱作用域的槽，它非常有用。
- <template>
- <form :class="{ '--invalid': isInvalid }" @input="validate">
- <slot v-bind="{ isInvalid }" />
- </form>
- </template>
- <script>
- export default {
- data: () => ({
- isInvalid: false,
- }),
- mounted() {
- const observer = new MutationObserver(this.validate);
- observer.observe(this.$el, {
- childList: true,
- subtree: true,
- });
- this.observer = observer;
- },
- methods: {
- validate() {
- this.isInvalid = !this.$el.checkValidity();
- },
- },
- beforeUnmount() {
- this.observer.disconnect();
- },
- };
- </script>
通過這樣的設置，可以在我們的表單組件中添加任意數量的 input，并添加任何它需要的條件渲染邏輯。只要input使用HTML驗證屬性，表單就會跟蹤它是否處于有效狀態。
此外，由于使用的是作用域槽，我們將表單的狀態提供給父級，所以父級可以對有效性的變化做出反應。
例如，在 App.vue，我們想在表單無效時 "禁用" 提交按鈕，可以這么來寫
- <template>
- <MyForm>
- <template slot:default="form">
- <label for="name">Name:</label>
- <input id="name" name="name" required>
- <button
- type="submit"
- :class="{ disabled: form.isInvalid }"
- >
- Submit
- </button>
- </template>
- </MyForm>
- </template>
nice~.
希望本文能對你未來的開必有所幫助。
