1. 動(dòng)態(tài)組件
動(dòng)態(tài)組件:顧名思義就是組件會動(dòng)態(tài)的切換顯示
需求: 需要根據(jù)不同的狀態(tài)顯示不同的組件.
案例:示例代碼如下:
我們能想到的就是使用v-if,或者v-show切換組件的顯示
1.1. 使用v-if 或v-show指令切換組件
<style>
.bottom{
display:flex;
position: fixed;
bottom:0;
left:0;
right:0;
height:50px;
background: #fff;
border-top:1px solid #ccc;
}
button{
flex:1;
border:0;
outline:none;
background: #fff;
}
.active{
background: #ccc;
}
</style>
<div id="app">
<!-- 組件的切換 -->
<Home v-if="com=='Home'"></Home>
<Articl v-if="com=='Articl'"></Articl>
<About v-if="com=='About'"></About>
<!-- 切換組件的按鈕 -->
<div class="bottom">
<button
v-for="value in components"
@click="change(value)"
:class="{active:com== value}"
>
{{value}}
</button>
</div>
</div>
<script>
// 首頁組件
let Home = {
template:`
<div>
<h2>Home組件</h2>
用戶名: <input type="text"/>
</div>
`
}
// 文章組件
// 注意不能使用article 因?yàn)閔tml有原生的article標(biāo)簽
let Articl = {
template:`
<div>
<h2>Article組件</h2>
</div>
`
}
// 關(guān)于作者組件
let About = {
template:`
<div>
<h2>About組件</h2>
</div>
`
}
// vue 實(shí)例
var vm = new Vue({
el: '#app',
data: {
com:"Home",
components:["Home","Articl","About"]
},
methods:{
change(value){
this.com = value;
}
},
components: {
Home,Articl,About
},
});
</script>
其實(shí)這樣的操作不是特別友好, 如果有幾十個(gè)組件這樣切換就得每一個(gè)組件都要通過v-if指令處理
因此vue提供了動(dòng)態(tài)組件幫我們處理同樣的事情
1.2. 動(dòng)態(tài)組件的基本用法
動(dòng)態(tài)組件在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的.
通過使用保留的 <component> 元素，并對其 is 特性進(jìn)行動(dòng)態(tài)綁定，你可以在同一個(gè)掛載點(diǎn)動(dòng)態(tài)切換多個(gè)組件：
使用動(dòng)態(tài)組件重新處理上面的示例
將上面示例中的如下代碼
<!-- 組件的切換 -->
<Home v-if="com=='Home'"></Home>
<Articl v-if="com=='Articl'"></Articl>
<About v-if="com=='About'"></About>
替換為
<component :is="com"></component>
這樣依然可以實(shí)現(xiàn)之前的效果.
此時(shí)is屬性的值是通過v-bind指令動(dòng)態(tài)綁定到data屬性中的數(shù)據(jù), 此時(shí)編譯后is的值是哪一個(gè)組件的名字就顯示哪一個(gè)組件.
2. 動(dòng)態(tài)組件上使用 keep-alive
當(dāng)在這些組件之間切換的時(shí)候，你有時(shí)會想保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。
一般用于組件的切換,否則組件在切換時(shí),會頻繁的創(chuàng)建和刪除組件,不太好,
這樣也沒法在組件切換是保存之前狀態(tài)
2.1 未使用keep-alive
在未使用keep-alive保存組件狀態(tài)時(shí),每次的最切換都是在創(chuàng)建一個(gè)新組件,并且刪除一個(gè)舊組件
每個(gè)組件也都有自己的生命周期,我們把生命周期 函數(shù)添加上看看是不是每次切換組件都是在重新創(chuàng)建和刪除組件
示例代碼:
<script>
// 首頁組件
let Home = {
template:`
<div>
<h2>Home組件</h2>
用戶名: <input type="text"/>
</div>
`,
created(){
alert("Home組件實(shí)例化完畢")
},
beforeDestroy(){
alert("Home組件將被刪除")
}
}
// 文章組件
// 注意不能使用article 因?yàn)閔tml有原生的article標(biāo)簽
let Articl = {
template:`
<div>
<h2>Article組件</h2>
</div>
`,
created(){
alert("Article實(shí)例化完畢")
},
beforeDestroy(){
alert("Article組件將被刪除")
}
}
// 關(guān)于作者組件
let About = {
template:`
<div>
<h2>About組件</h2>
</div>
`,
created(){
alert("About實(shí)例化完畢")
},
beforeDestroy(){
alert("About組件將被刪除")
}
}
// vue 實(shí)例
var vm = new Vue({
el: '#app',
data: {
com:"Home",
components:["Home","Articl","About"]
},
methods:{
change(value){
this.com = value;
}
},
components: {
Home,Articl,About
},
});
</script>
看視圖:
因?yàn)槊看谓M件切換都是新創(chuàng)建的組件,都是全新的,那么在組件切換前的組件狀態(tài)將沒發(fā)保存
2.2 使用keep-alive 保存狀態(tài)
但是在這個(gè)案例中，我們更希望那些標(biāo)簽的Home組件實(shí)例能夠被在它們第一次被創(chuàng)建的時(shí)候緩存下來。為了解決這個(gè)問題，我們可以用一個(gè) <keep-alive> 元素將其動(dòng)態(tài)組件包裹起來。
<!-- 緩存組件 -->
<keep-alive>
<component :is="com"></component>
</keep-alive>
修改后的結(jié)果
此時(shí)組件并不會被銷毀,而是一直緩存著,因?yàn)閗eep-alive的原因
