Vue學習筆記 專案開發4 4全域性事件解綁

2021-10-03 17:24:05 字數 838 閱讀 2761

在元件上定義方法,不解綁的情況下,元件上定義的方法由於僅侷限於當前元件並不會影響到全域性的使用,但是如果使用window,將事件繫結在window上的話則繫結元件會起作用,其他元件也會起作用,所以需要對全域性事件進行解綁,這樣可以將功能僅侷限於定義功能的這個元件上

1、定位到當前專案中,在詳情頁面中滑動實現漸隱漸現的效果中通過window.addeventlistener來繫結scroll事件,這個表面上看起來是沒啥問題。但其實是有問題的。因為他繫結的是window全域性事件。也就是說 不僅僅在當且頁面會觸發,在別的頁面也有可能觸發 比如說這事件在頁面滑動的時候輸出scroll。 在當前頁面是這麼輸出。返回到首頁後,然後會在輸出

2、解決方法

新增解綁動作的生命週期函式接觸繫結即可:

deactivated()

【注】:對於activated和deactivated說明可查閱官網文件即需要將內容包裹在乙個< keep-alive>標籤才能夠呼叫這兩個生命週期函式

// detail.vue

<

/detail-banner>

// 將header元件包裹

<

/detail-header>

<

/keep-alive>

="content"

>

<

/div>

<

/div>

<

/template>

Vue 開發全域性元件

有時候專案中有一些元件,比如 loading toast等等,經常用到的,可以封裝好,註冊成全域性元件,這時候就要使用vue的指令 vue.extend以 toast 為例子,開發乙個 toast 全域性元件,只是簡易版的哈,彈出來然後消失那種 二 目錄結構 toast.vue 主要是寫html 以...

Vue 全域性loading元件開發

開發loading元件 src components loading index.vue u loading fade visible class u loading mask u loading spinner assets loading.gif u loading text p div div...

Vue全域性元件的開發

把一些使用頻率較高的元件封裝為全域性元件,防止頻繁引入。例如 element中的各個元件 實現方法,通過借助webpack的require.context 方法來封裝自己常用的全域性元件,開發步驟如下 第一步,封裝importall.js importall.js檔案 import vue from...