Vue一個案例引發的動態組件與全局事件綁定總結

MycLambert 發布于2019-08-23 13:03 / 1533人閱讀

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

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

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

城市列表選擇組件

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

輸入框獲取焦點時，顯示組件

點擊城市列表更新輸入框的城市顯示

點擊其他空白處組件隱藏

在切換到其他組件時，選擇的城市保留而不是被重置

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

第一步

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

第二步

我們也不做過多的表述本文想更多的是介紹動態組件與全局事件的綁定，利用的是子組件給父組件利用自定義事件 $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 該如何使用以及作用是什么呢？

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

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

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

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

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

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

總結

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

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

文中如有不足之處，歡迎大神拍磚！

關注微信公眾號：六小登登。領取全套學習資源

云服務器 GPU云服務器事件的一個 vue組件 js清除綁定的事件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99183.html

Vue一個案例引發的遞歸組件的使用

摘要：今天我們繼續使用的擼我們的實戰項目，只有在實戰中我們才會領悟更多，光紙上談兵然并卵，繼上篇我們的一個案例引發的動態組件與全局事件綁定總結之后，今天來聊一聊我們如何在項目中使用遞歸組件。今天我們繼續使用 Vue 的擼我們的實戰項目，只有在實戰中我們才會領悟更多，光紙上談兵然并卵，繼上篇我們的《Vue一個案例引發的動態組件與全局事件綁定總結》之后，今天來聊一聊我們如何在項目中使用遞歸組...

lucas 2019-08-26 12:23 評論0 收藏0
認識Vue組件

摘要：認識組件組件是強大的功能之一。注意，所有的組件同時也都是的實例，可接受相同的選項對象。組件全局注冊時通過方式注冊?？紤]到會出現禁止使用的場景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項中定義好傳遞過來的數據。前言 Vue.js是一套構建用戶界面的漸進式框架（官方說明）。通俗點來說，Vue.js是一個輕量級的，易上手易使用的，便捷，靈活性強的前端MVVM框架。簡潔的A...

xumenger 2019-08-22 11:19 評論0 收藏0
Vue一個案例引發「動畫」的使用總結

摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數，我們可以使用鉤子函數構建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。項目開發中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。對，你說的沒錯...

liuchengxu 2019-08-23 13:43 評論0 收藏0
前端面試題總結——VUE（持續更新中）

摘要：前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。前端面試題總結——VUE（持續更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0
前端知識點

摘要：原理對處理函數進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。在目標發出內容改變的事件后，直接接收事件并作出響應。首先是目標的構造函數，他有個數組，用于添加觀察者。關于排序 js中sort函數的底層實現機制？ js中sort內置多種排序算法，是根據要排序數的亂序程度來決定使用哪一種排序方法。V8 引擎 sort 函數只給出了兩種排序 Inse...

wums 2019-08-23 15:53 評論0 收藏0