Vue 初心者筆記 #20 使用 is 動態切換元件
本篇文章會介紹使用 is 顯示元件與動態切換元件的方式。
使用 is “顯示” 元件
顯示元件有兩種方式：
- 第一種是將元件的
template名稱直接寫成標籤
例如<primary-component> - 另一種則是透過
is把資料內容帶入
例如：帶入<div>的標籤內
基本上，這兩種方式呈現於畫面上的結果是一樣的。
使用 is “動態切換” 元件
v-if 寫法
過去要達到 “切換” 的效果，我們會使用點擊事件 v-on:click，搭配 v-if 條件判斷式來完成。
範例：
但是這個 v-if 的方法只適合用在切換的元件數量比較少的時候。
如果要切換的元件很多，像是製作頁籤的時候，
我們不就需要寫好幾行類似的程式碼了嗎？
這樣子效果就不是很好了。
is 寫法
所以我們要改良一下，像是改成使用 is 來做切換元件的動作。
要特別注意，因為這裡是做「動態」切換，所以要在
is前面加上v-bind，寫成:is。
這邊我們使用 v-bind 分別綁定 data 內的變數資料 current 與 item。
之所以會使用 v-bind 綁定 current，是因為要讓 is 指向「元件名稱」，使得 Vue 在初始化時，就替換成該元件。
因此，v-bind:is 是將元件名稱指向 current 這個變數，也代表動態切換的控制權是交由 current 來決定。
那麼，current 又是由誰控制呢？
我們的 a 按鈕上都有綁定 v-on:click 事件，當使用者點擊按鈕時，current 的值就會做出切換。
例如：點擊「紅色元件」按鈕時，current 變數的值會從 primary-component 改為 danger-component。
所以我們才能只綁定 current 變數，就達到切換按鈕的效果！
以上資源是我自己整理過後的筆記，若有錯誤歡迎隨時和我聯繫。