超緊繃!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

今天的教學到這邊結束,我們明天見~!