vue 動態組件component

Posted on by

1、component

如何實現動態組件渲染

vue提供瞭一個內置的<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">

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

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

</div>

<script>

	export default {

		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 '@/components/Left.vue'

components: {

	Left,

}

這裡的註冊名隻用於組件的引用，如果組件內沒有name屬性那麼name默認就是註冊名

組件內：

export default{

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

	name: 'MyRight'

}

組件內聲明瞭name屬性該組件在調試工具中顯示的標簽就是該名稱，標簽中的緩存功能用到的也是該名稱

到此這篇關於 vue 動態組件component 的文章就介紹到這瞭,更多相關 vue 動態組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：