vue 動態元件

2021-09-08 16:51:00 字數 834 閱讀 5634

看例子:

>

"one"

>

component

>

div>

// js 部分

newvue(,

two:

, thr:}}

)

上面**註冊了三個元件,在 component 標籤裡有個屬性 is,is=one,所以頁面會渲染名字叫 one 的元件,顯示結果如下:

我是線路一

如果給 is 屬性繫結動態值,那麼就可以實現元件的動態切換,例子如下:

>

v-for

="item in tabs"

@click

="change = item.id"

>

}button

>

:is=

"change"

>

component

>

div>

// js 部分

newvue(,

,]},

components:

, two:

, thr:}}

)

上面**用 v-bind 給屬性 is 動態傳遞了值,實現了元件的動態切換,效果如下:

Vue 動態元件

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

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...