詳解Vue 動態組件與全局事件綁定總結

最近在自學 Vue 也了解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去查看我的其他文章，技術這東西真的不能光靠看，看是沒有的，你必須要動手實踐，只有在實戰項目中才能發現問題，才能發現我們沒有掌握的知識點，然后發現問題解決問題，我們的能力才能得以提升，要不然就有點眼高手低了。

基于這個想法于是就開始自己去擼了一個旅游網站，旅游網站嘛避免不了城市的選擇，所以在實現城市選擇列表的時候碰到的一些問題，以及解決辦法今天就記錄下來做一個總結。

城市列表選擇組件

首先說說我們要實現一個什么樣的城市選擇組件：

• 輸入框獲取焦點時，顯示組件
• 點擊城市列表更新輸入框的城市顯示
• 點擊其他空白處組件隱藏
• 在切換到其他組件時，選擇的城市保留而不是被重置

下面我們就一步一步的來拆解

第一步

輸入框獲取焦點后顯示組件很簡單，我們給輸入框綁定焦點事件然后給組件傳入一個顯示的狀態即可，我們把 isShowCityList 傳遞給城市選擇組件控制行為。

<el-input 
  @focus="isShowCityList=true"
  placeholder="請輸入目的地">
</el-input>

第二步

我們也不做過多的表述本文想更多的是介紹動態組件與全局事件的綁定，利用的是子組件給父組件利用自定義事件 $emit 傳給父組件。

第三步

需要我們去點擊其他地方城市組件被隱藏，有些同學的第一印象可能是利用 input 的 blur 事件（就是失去焦點事件），只要我們的 input 失去焦點時，我們就隱藏。

其實我的第一印象也是如此，但是我們綁定的是 input 的失去焦點事件以后，當我們選擇城市列表的時候也是 input 失去焦點的時候，所以我們就無法選取城市。顯然這種思路是不行的。

所以這里我們只能去用到 Vue 的全局事件的綁定，然后去進行一個判斷我們點擊的節點是哪里，如果是城市組件以外我們就進行隱藏操作。

我們在 mounted 鉤子函數中，進行如下操作。

mounted() {
  document.addEventListener("click", e => {
    console.log('全局事件被觸發');
    if (!this.$refs.searchCity.contains(e.target)) {
      this.isLoadCityList = false;
    }
  });
}

OK，進行這一步之后，我們的問題得到了解決，只要我們點擊這個容器以外的地方就會隱藏城市列表組件，我以為算是結束了，不過那是不可能的，還是我太年輕了，這樣做的后果就是不管我們點擊任何一個地方它都會觸發這個事件，即使是我們切換到其他組件時，事件照樣會被觸發，顯然這個不是我們想要的，因為當前事件會被無限觸發，無疑會給我們帶來不可預見的問題。

我們需要的最好效果肯定是當前的全局事件就在當前的組件下產生作用，當我們切換到其他組件時，事件自動刪除，于是我可能想到的就是利用 beforeDestroy 鉤子函數去刪除這個全局事件。也就是當我們切換到其他組件時，去刪除這個全局事件。

beforeDestroy() {
  document.removeEventListener("click", () => {
   //...
  });
}

你以為這樣我還就能解決問題了嗎？顯然還是不能，還是太年輕，只是這樣我們是解除不了綁定的事件，那我們該怎么辦呢？其實這里面有一個坑，大坑，因為這個大坑自己不知道，差了許多資料也沒查出來，因為差的思路錯了，最后在一個群里問了一個大佬，才得出答案，不得不說與前輩交流很重要啊，能幫你少踩很多坑。

這里如果想要解除綁定，解除和綁定的兩個回調函數必須一致，什么意思呢？看代碼你就明白。如果不這么操作，你是解除不掉事件的，至于更深的原因我也不怎么明白了，以后再去查閱一些資料。

methods: {
 isSearchCityNode(e) {
  if (!this.$refs.searchCity.contains(e.target)) {
   console.log("全局事件被觸發");
   this.isLoadCityList = false;
  }
 } 
},
mounted() {
  document.addEventListener("click", this.isSearchCityNode);
},
beforeDestroy() {
  document.removeEventListener("click", this.isSearchCityNode);
}

第四步

需要我們在切換組件的時候保留我們選擇的城市，如果不保留我們每次切換到其他組件時，我們選擇的城市都會被重置為默認值，這個體驗肯定是肯差的，也不是我們想要的。

被重置的原因則是我們在每次在不同的組件進行切換的時候，組件都會進行新建與銷毀，這也會導致重復渲染問題對性能也是不友好的。

那么我們該如何去處理這個問題呢？ 我這里使用了 keep-alive 去解決這個問題，那么 keep-alive 該如何使用以及作用是什么呢？

<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們，它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

但是當我們使用 <keep-alive> 的時候，我們的 beforeDestroy 鉤子函數就會失效，導致我們第三步的全局事件的解綁就不能執行了，原因是我們的組件是被緩存起來，并沒有被銷毀。自然會失效，但是我們并不慌，當我們使用 <keep-alive> 時，activated 和 deactivated 兩個鉤子函數被觸發。

activated：keep-alive 組件激活時調用。

deactivated：keep-alive 組件停用時調用。

所以我們不難發現，我們完全可以使用這兩個鉤子去實現我們全局事件的綁定與解綁，簡直完美。

activated() {
  document.addEventListener("click", this.isSearchCityNode);
},
deactivated() {
  document.removeEventListener("click", this.isSearchCityNode);
}

總結

通過一個城市列表組件的案例，介紹了我們在 Vue 中如何綁定全局事件以及進行優化，一定要記住事件的綁定與解除哪里有一個大坑。

我們通過 <keep-alive> 可以創建一個可以緩存的組件，而且會新增兩個鉤子函數提供我們使用

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。