vue動態元件和 keep alive

2022-07-24 06:00:18 字數 1155 閱讀 8958

所謂動態元件就是讓多個元件使用同乙個掛載點,並動態切換。

is 用法

通過使用保留的元素,動態地繫結到它的 is 特性,我們讓多個元件可以使用同乙個掛載點,並動態切換。根據v-bind:is="元件名",元件名就會自動去匹配對應的元件,如果匹配不到,則不顯示。改變掛載的元件,只需要修改 is 屬性的值即可。

demo

主頁詳情頁

存檔頁

keep-alive 元件

上面我們已經通過繫結is屬性來切換不同的元件,被切換掉的元件(非當前顯示元件),是被直接移除了。用包裹元件,可以使被切換掉的元件保留在記憶體中,從而保留它的狀態避免切換顯示的時候重新渲染,能夠提高效能。

keep-alive 是乙個抽象元件,它本身不會被渲染為乙個dom元素,也不會出現在父元件鏈中。當 keep-alive 包裹元件時,會快取不活動的元件例項,而不是直接銷毀

基礎用法示例:

切換頁面

activated 和 deactivated

在 2.2.0 及其更高版本中,activated 和 deactivated 將會在樹內的所有巢狀元件中觸發。

當元件在內被切換,它的activateddeactivated這兩個生命週期鉤子函式將會被對應執行。

props

匹配首先檢查元件自身的 name 選項,如果 name 選項不可用,則匹配它的區域性註冊名稱 (父元件 components 選項的鍵值)。匿名元件不能被匹配。

max 最多可以快取多少元件例項。一旦這個數字達到了,在新例項被建立之前,已快取元件中最久沒有被訪問的例項會被銷毀掉。

注意

不會在函式式元件中正常工作,因為它們沒有快取例項。

本文**:

Vue 動態元件

vue.js提供了乙個特殊的元素用來動態掛載不同的元件,使用is特性來選擇要掛載的元件 is current component click change a 切換到a元件button click change b 切換到b元件button click change c 切換到c元件button d...

vue 動態元件

看例子 one component div js 部分 newvue two thr 上面 註冊了三個元件,在 component 標籤裡有個屬性 is,is one,所以頁面會渲染名字叫 one 的元件,顯示結果如下 我是線路一 如果給 is 屬性繫結動態值,那麼就可以實現元件的動態切換,例子如下...

vue動態元件 非同步元件

重新建立動態元件的行為通常是非常有用的,但是在這個案例中,我們更希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來。為了解決這個問題,我們可以用乙個元素將其動態元件包裹起來。v bind is currenttabcomponent component keep alive 注意 這個要求...