Vue 初心者筆記 #20 使用 is 動態切換元件

本篇文章會介紹使用 is 顯示元件與動態切換元件的方式。

使用 is “顯示” 元件

顯示元件有兩種方式:

  1. 第一種是將元件的 template 名稱直接寫成標籤
    例如 <primary-component>
  2. 另一種則是透過 is 把資料內容帶入
    例如:帶入 <div> 的標籤內

基本上,這兩種方式呈現於畫面上的結果是一樣的。

使用 is “動態切換” 元件

v-if 寫法

過去要達到 “切換” 的效果,我們會使用點擊事件 v-on:click,搭配 v-if 條件判斷式來完成。

範例:

但是這個 v-if 的方法只適合用在切換的元件數量比較少的時候。

如果要切換的元件很多,像是製作頁籤的時候,
我們不就需要寫好幾行類似的程式碼了嗎?
這樣子效果就不是很好了。

is 寫法

所以我們要改良一下,像是改成使用 is 來做切換元件的動作。

要特別注意,因為這裡是做「動態」切換,所以要在 is 前面加上 v-bind,寫成 :is

這邊我們使用 v-bind 分別綁定 data 內的變數資料 currentitem

之所以會使用 v-bind 綁定 current,是因為要讓 is 指向「元件名稱」,使得 Vue 在初始化時,就替換成該元件。
因此,v-bind:is 是將元件名稱指向 current 這個變數,也代表動態切換的控制權是交由 current 來決定。

那麼,current 又是由誰控制呢?

我們的 a 按鈕上都有綁定 v-on:click 事件,當使用者點擊按鈕時,current 的值就會做出切換。
例如:點擊「紅色元件」按鈕時,current 變數的值會從 primary-component 改為 danger-component

所以我們才能只綁定 current 變數,就達到切換按鈕的效果!

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。