[[421396]]

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

下面的代碼片段是以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~.

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