超緊繃!30天Vue.js學習日記 組件最終篇-動態組件的部分!
大家好!在昨天介紹插槽(slot)後,今天要介紹的是動態組件!
Vue.js允許我們將多個組件掛載到同一個掛載點上,這個功能通常用在路由控制或是分頁切換:
<div id="app">
<ul>
<li @click="currentView = 'home'">Home</li>
<li @click="currentView = 'list'">List</li>
<li @click="currentView = 'about'">About</li>
</ul>
<component :is="currentView"></component>
</div>
<script>
var app = new Vue({
el:'#app',
data(){
return{
currentView: 'home'
}
},
components:{
home:{
template:'<div>home</div>'
},
list:{
template:'<div>list</div>'
},
about:{
template:'<div>about</div>'
}
}
})
</script>
在以上範例中我們先透過click事件去改變currentView的值,這樣一來,component也會因為其綁定的currentView發生變化,而重新掛載其他組件!
不過,若我們今天在任一組件(假設為組件A)中綁定使用者自行輸入的資料,切到組件B後再切回組件A時就會發現:綁定的資料不見了!!!
任一組件的樣板:
components:{
home:{
template:'<div><input type="text" v-model="msg">{{msg}}</div>',
data(){
return{
msg:''
}
}
}
}
若我們不希望這種狀況發生,我們可以使用秘密武器:keep-alive!!!
但如果你覺得沒差,可以直接離開(誤)
你問我keep-alive怎麼用?我們直接用滿滿的愛包住掛載點,像是這樣:
<keep-alive><component :is="currentView"></component></keep-alive>
小補充:
activated與deactivated鉤子函數
在更先前的生命週期篇沒提到的部分activated鉤子函數用於組件在keep-alive中執行時,分別為切換進來/出去時執行我們在鉤子函數內寫好的function:
//某組件中
activated () {
setTimeout(function(){ alert('hello!') }, 1000);
},
deactivated () {
setTimeout(function(){ alert('Bye!') }, 1000);
}
這邊要注意的是,需要用到keep-alive這兩個鉤子函數才會有作用喔!!
本日範例在此下載:
https://drive.google.com/open?id=1zTgVAL1WpYvFfEmlmu41KgfNi2EgPpYz
今天的教學到這邊結束,我們明天見~!