# Vue學習#36 動態元件管理
###### tags: `Vue 直播班 - 2022 春季班`

## 動態元件

在練習的時候，常常會有個情況是有個區塊想要根據點選按鈕等等的事件來切換不同的元件內容，<font color='red'>根據事件不同而顯示不同元件</font>

## 過去作法

利用 `v-if` 搭配變數來作做元件的切換

### [ v-if 變換元件顯示](https://codepen.io/binlandz123/pen/ZErVzeQ)

## :is 來做元件切換

Vue 提供了另一個特殊的屬性 is 讓我們可以更簡單的做到動態的元件切換

### step1 :　新增 computed


在舊做法中，我們使用一個變數 (mes) ，並賦予元件名稱來當做 mes 的值，並且在元件標籤使用 `v-if` 來做元件內容顯示切換
在新做法中，我們用 computed 並宣告一個 currentCom() 來做值的監聽與改變，並指向 mes

### step2 : 標籤切換


到這裡才跟舊做法不太一樣，我們使用一個 `<component></component>` 來取代每個元件名稱，並在標籤內使用 `:is` 來使用 computed 監聽的值來做判斷

### [Vue 動態元件 :is](https://codepen.io/binlandz123/pen/VwQqZMX)