Vue 動態元件

vue.js提供了乙個特殊的元素用來動態掛載不同的元件，使用is特性來選擇要掛載的元件：

>

:is=
"current"
>
component
>
@click
="change('a')"
>
切換到a元件button
>
@click
="change('b')"
>
切換到b元件button
>
@click
="change('c')"
>
切換到c元件button
>
div>
>
newvue(,
components:
, comb:
, comc:,}
, methods:}}
)script
>

要想在元件切換過程中將狀態保留在記憶體中，可以使用元素將動態元件包裹起來，這樣就不會重新渲染dom。

>

>
:is=
"current"
>
component
>
keep-alive
>
@click
="change('a')"
>
切換到a元件button
>
@click
="change('b')"
>
切換到b元件button
>
@click
="change('c')"
>
切換到c元件button
>
div>
>
newvue(,
components:
, comb:
, comc:,}
, methods:}}
)script
>

參考：1.vue.js官方文件

2.《vue.js實戰》

vue 動態元件

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

vue動態元件 非同步元件

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

Vue 元件4 動態元件

動態元件 通過使用保留的元素，動態的繫結到它的is特性，我們讓多個元件同時使用同乙個掛載點，並動態切換 var vm new vue components posts archive component 也可以直接繫結到元件物件上 var home var vm new vue keep alive...