<button @click="comName = 'Left'">展示Left</button>

<button @click="comName = 'Right'">展示Right</button>



<div class="box">

	<!-- 渲染Left組件和Right組件 -->

	<!-- component組件是Vue內(nèi)置的 -->

	<!-- is表示要渲染的組件的名字 -->

	<component :is="comName"></component>

</div>

<script>

	import Left from '@/compeonents/Left.vue'

	import Right from '@/components/Right.vue'



	export default {

		components: {

			Left,

			Right

		},

		data() {

			return {

				//comName 表示要展示的組件的名字

				comName: Left,

			}

		}

	}

</script>

<div class="left-container">

	<h3>Left 組件 ---- {{ count }}</h3>

	<button @click="count += 1">+1</button>

</div>

<script>

	export default {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

export default {

	created() {

		console.log('Left 組件被創(chuàng)建了！')

	}，

	destoryed(){

		console.log('Left 組件被銷毀了~')

	}

}

<keep-alive>

	<!-- keep-alive 可以把內(nèi)部的組件進(jìn)行緩存，而不是銷毀組件 -->

	<component :is="comName"></component>

</keep-alive>

//當(dāng)組件第一次被創(chuàng)建時(shí)，會(huì)先觸發(fā)created,后觸發(fā)activated

//當(dāng)組件被激活時(shí)，只會(huì)觸發(fā)activated，不觸發(fā)created

activated() {

	console.log('組件被激活了，activated')

},

deactivated(){

	console.log('組件被緩存了，deactivated')

}

<keep-alive include="Left,MyRight">

	<component :is="comName"></component>

</keep-alive>

export default{}

export default{

	//當(dāng)提供了name屬性后，組件的名稱就是name屬性的值

	name: 'MyRight'

}

import Left '@/components/Left.vue'

components: {

	Left,

}

export default{

	//當(dāng)提供了name屬性后，組件的名稱就是name屬性的值

	name: 'MyRight'

}