20181121 Vue動態元件

2021-09-01 12:36:24 字數 378 閱讀 4056

在動態元件上使用 keep-alive

我們之前曾經在乙個多標籤的介面中使用 is 特性來切換不同的元件:

當在這些元件之間切換的時候,你有時會想保持這些元件的狀態,以避免反覆重渲染導致的效能問題。例如我們來展開說一說這個多標籤介面:

你會注意到,如果你選擇了一篇文章,切換到 archive 標籤,然後再切換回 posts,是不會繼續展示你之前選擇的文章的。這是因為你每次切換新標籤的時候,vue 都建立了乙個新的 currenttabcomponent 例項。

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

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 注意 這個要求...