1、 什麼是動態元件
動態元件是指：在乙個掛載點使用多個元件，並進行動態切換。可能對於新手來說，這句話有些難理解，什麼是掛載點?可以簡單的理解為頁面的乙個位置。
最常見的就是：tab的切換功能。
在vue要實現這個功能通常用兩種方式。一是使用元素的is的特性，二是使用v-if。
>
class
="hello"
>
>
使用component 的 is特性h3
>
>
v-for
="(item,index) in tablist"
:key
="index"
style
="cursor
:pointer"
@click
="changeview(index)"
>
}li>
ul>
:is=
"currentview"
>
component
>
div>
template
>
>
// 相關的元件**在這裡不展示
import shouji from
"./shouji"
;import pc from
"./pc"
;import shuma from
"./shuma"
;export
default
,data()
;}, computed:},
methods:},
};script
>
>
class
="hello"
>
>
使用v-if實現h3
>
>
v-for
="(item,index) in tablist"
:key
="index"
style
="cursor
:pointer
" @click
="change(index)"
>
}li>
ul>
>
v-if
="index===0"
>
shuma
>
v-else-if
="index===1"
>
shouji
>
v-else
>
pc>
div>
div>
template
>
>
// 相關的元件**在這裡不展示
import shouji from
"./shouji"
;import pc from
"./pc"
;import shuma from
"./shuma"
;export
default
,data()
;}, computed:
, methods:},
};script
>
>
class
="hello"
>
>
使用component 的 is特性 有快取的元件h3
>
>
v-for
="(item,index) in tablist"
:key
="index"
style
="cursor
:pointer"
@click
="changeview(index)"
>
}li>
>
:is=
"currentview"
>
component
>
keep-alive
>
ul>
div>
template
>
>
// 相關的元件**在這裡不展示
import shouji from
"./shouji"
;import pc from
"./pc"
;import shuma from
"./shuma"
;export
default
,data()
;}, computed:},
methods:},
};script
>
activated()
,deactivated()
include表示只能允許匹配到的元件生效
exclude則相反，除了匹配到的元件之外有效
使用方法：
<
!-- 字串 逗號分隔字串， a，b 分別為元件名 --
>
"a,b"
>
"currentview"
>
<
/component>
<
/keep-alive>
<
!-- 正規表示式 --
>
"/a|b/"
>
"currentview"
>
<
/component>
<
/keep-alive>
<
!-- 陣列 --
>
"['a', 'b']"
>
"currentview"
>
<
/component>
<
/keep-alive>
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 注意 這個要求...