目錄

• 1、component
• 2、keep-alive
• 2.1存在的問題
• 2.2使用keep-alive解決
• 2.3keep-alive的生命週期
• 2.4keep-alive 的 include,exclude屬性

1、component

如何實現動態元件渲染

提供了一個內建的<component>,專門用來實現動態元件的渲染。

這個標籤就相當於一個佔位符，需要使用is屬性指定繫結的元件

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

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



<div class="box">

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

	<!-- component元件是Vue內建的 -->

	<!-- 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>

2、keep-alive

2.1存在的問題

當在Left元件中實現一個按鈕加一的功能，加一操作後切換元件，再切回來

如下是Left中加一功能

<div class="left-container">

	&lFCLxrMt;h3>Left 元件 ---- {{ count }}</h3>

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

</div>

<script>

	export dFCLxrMefault {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

操作，進行加一操作後切換到right元件，再切換回來，發現元件中的資料被重寫初始化了

使用Vue的生命週期檢視Left元件

如下是Left中新增生命週期函式

export default {

	created() {

		console.log('Left 元件被建立了！')

	}，

	destoryed(){

		console.log('Left 元件被銷燬了~')

	}

}

再次執行上訴操作後，得到的結果如下：

存在的問題： 在切換元件的同時會銷燬和建立元件，這樣每次切換到同一組件時得到的元件物件就不是同一個了，會重寫初始化資料

2.2使用keep-alive解決

keep-alive 元件也是Vue內建的元件，可以直接使用

在App根元件中如下修改：

<keep-alive>

	<!-- keep-alive 可以把內部的元件進行快取，而不是銷燬元件 -->

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

</keep-alive>

2.3keep-alive的生命週期

該生命週期，只有在元件使用了keep-alive時才能使用

deactivated當元件被快取時，自動觸發

actived當元件被啟用時，自動觸發

在Left元件中新增如下修改

//當元件第一次被建立時，會先觸發created,後觸發activated

//當元件被啟用時，只會觸發activated，不觸發created

activated() {

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

},deactivated(){

	console.log('元件被快取了，deactivated')

}

2.4keep-alive 的 include,exclude屬性

keep-alive預設會快取所有被keep-alive包裹的component裡的元件

如何指定需要快取的元件呢：

使用include / exclude 屬性,不能同時使用

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

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

</keep-alive>

以上指定了需要快取的元件名稱： 注意這裡的元件的名稱

Left元件中：

export default{}

Right元件中：

export default{

	//當提供了name屬性後，元件的名稱就是name屬性的值

	name: 'MyRight'

}

區分： 元件內name屬性，和元件外註冊名 的關係

元件外：

import Left 'FCLxrM@/components/Left.vue'

components: {

	Left,}

這裡的註冊名只用於元件的引用，如果元件內沒有name屬性那麼name預設就是註冊名

元件內：

export default{

	//當提供了name屬性後，元件的名稱就是name屬性的值

	name: 'MyRight'

}

元件內聲明瞭name屬性該元件在除錯工具中顯示的標籤就是該名稱，標籤中的快取功能用到的也是該名稱

到此這篇關於 vue 動態元件component 的文章就介紹到這了,更多相關 vue 動態元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！