欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 動態(tài)組件component

 更新時間：2021年11月27日 14:27:54   作者：小白一起學編程  
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內(nèi)置的<component>,專門用來實現(xiàn)動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內(nèi)容的小伙伴請參考下面文章的具體內(nèi)容

1、component

如何實現(xiàn)動態(tài)組件渲染

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

這個標簽就相當于一個占位符，需要使用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存在的問題

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

如下是Left中加一功能

<div class="left-container">

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

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

</div>

<script>

	export default {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

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

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

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

export default {

	created() {

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

	}，

	destoryed(){

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

	}

}

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

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

2.2使用keep-alive解決

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

在App根組件中如下修改：

<keep-alive>

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

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

</keep-alive>

2.3keep-alive的生命周期

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

deactivated當組件被緩存時，自動觸發(fā)

actived當組件被激活時，自動觸發(fā)

在Left組件中添加如下修改

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

//當組件被激活時，只會觸發(fā)activated，不觸發(fā)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'

}

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


組件外：

import Left '@/components/Left.vue'

components: {

	Left,

}

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

組件內(nèi)：

export default{

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

	name: 'MyRight'

}

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

到此這篇關(guān)于 vue 動態(tài)組件component 的文章就介紹到這了,更多相關(guān) vue 動態(tài)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論