vue動(dòng)態(tài)組件component怎么使用

本篇內(nèi)容介紹了“vue動(dòng)態(tài)組件component怎么使用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、component

如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染

vue提供了一個(gè)內(nèi)置的<component> ,專門用來實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。

這個(gè)標(biāo)簽就相當(dāng)于一個(gè)占位符，需要使用is屬性指定綁定的組件

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

2、keep-alive

2.1存在的問題

當(dāng)在Left組件中實(shí)現(xiàn)一個(gè)按鈕加一的功能，加一操作后切換組件，再切回來

如下是Left中加一功能

<div class="left-container">

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

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

</div>

<script>

	export default {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

操作，進(jìn)行加一操作后切換到right組件，再切換回來，發(fā)現(xiàn)組件中的數(shù)據(jù)被重寫初始化了

使用Vue的生命周期查看Left組件

如下是Left中添加生命周期函數(shù)

export default {

	created() {

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

	}，

	destoryed(){

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

	}

}

再次執(zhí)行上訴操作后，得到的結(jié)果如下：

存在的問題： 在切換組件的同時(shí)會(huì)銷毀和創(chuàng)建組件，這樣每次切換到同一組件時(shí)得到的組件對象就不是同一個(gè)了，會(huì)重寫初始化數(shù)據(jù)

2.2使用keep-alive解決

keep-alive 組件也是Vue內(nèi)置的組件，可以直接使用

在App根組件中如下修改：

<keep-alive>

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

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

</keep-alive>

2.3keep-alive的生命周期

該生命周期，只有在組件使用了keep-alive時(shí)才能使用

deactivated當(dāng)組件被緩存時(shí)，自動(dòng)觸發(fā)

actived當(dāng)組件被激活時(shí)，自動(dòng)觸發(fā)

在Left組件中添加如下修改

//當(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')

}

2.4keep-alive 的 include, exclude屬性

keep-alive默認(rèn)會(huì)緩存所有被keep-alive包裹的component里的組件

如何指定需要緩存的組件呢：

使用include / exclude 屬性,不能同時(shí)使用

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

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

</keep-alive>

以上指定了需要緩存的組件名稱： 注意這里的組件的名稱

Left組件中：

export default{}

Right組件中：

export default{

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

	name: 'MyRight'

}

區(qū)分： 組件內(nèi)name屬性，和組件外注冊名 的關(guān)系

組件外：

import Left '@/components/Left.vue'

components: {

	Left,

}

這里的注冊名只用于組件的引用，如果組件內(nèi)沒有name屬性那么name默認(rèn)就是注冊名

組件內(nèi)：

export default{

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

	name: 'MyRight'

}

組件內(nèi)聲明了name屬性該組件在調(diào)試工具中顯示的標(biāo)簽就是該名稱，標(biāo)簽中的緩存功能用到的也是該名稱

“vue動(dòng)態(tài)組件component怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！