1 <component :is="activeComponent" />

首先先回想一下在 JavaScript 有

if 可以判斷

function 判斷(page = 1) {
  if (page === 1) return "home";
  if (page === 2) return "profile";
  if (page === 3) return "setting";
  return "default";
}

除了 if 外，還有 switch case

function 判斷(page = 1) {
  let ans = "";
  switch (page) {
    case 1:
      ans = "home";
      break;
    case 2:
      ans = "profile";
      break;
    case 3:
      ans = "setting";
      break;
    default:
      ans = "default";
  }
  return ans;
}

在vue要動態地渲染不同 components 也是可以用 v-if
還有今天的主角 v-bind:is (簡寫 :is)
還會用到 <component>標籤

基礎範例一

https://codesandbox.io/s/vue-v-bind-is-example-hywpth

注意事項!!

• <component>標籤沒有s
• 要使用 is 必須在組件宣告name屬性
• is 後面要用引號把組件名稱框起來
  • :is="'你import的components'"
• 可以用變數動態渲染
  • :is="Step${currentStep}"
• 使用在原生標籤的限制
  • <tr is="vue:blog-post-row"></tr>
  • https://cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

2 <keep-alive><component :is="currentTabComponent"></component></keep-alive>

當使用 is 實作分頁功能會遇到一個狀況，那就是變數會變成預設值這個問題
舉很常見的填表單步驟123當例子，每個步驟都是一個組件當回到上一步時填寫的資料變成空的非常不合理對吧!

這時候<keep-alive>標籤就該出場了，顧名思義是保持活著的狀態

這邊統整一下會遇到的名詞

• <keep-alive>可以用的屬性
  • :include=""
  • :exclude=""
  • :max=""
• 特殊的生命週期
  • activated (vue3 叫做 onActivated)
  • deactivated (vue3 叫做 onDeactivated)

超簡短的生命週期說明

看起來很難，但如果實際畫圖&做實驗就會簡單很多!

CMA CDMA DA

• 假設叫做(女/男)兩分頁切換
• 預設是顯示女分頁
  • 女(生成 created)
  • 女(掛載 mounted)
  • 女(啟用 activated)
• 點男分頁
  • 男(生成 created)
  • 女(暫停 deactivated)
  • 男(掛載 mounted)
  • 男(啟用 activated)
• 點回女分頁
  • 跳過生成因為已經有了
  • 男(暫停 deactivated)
  • 跳過掛載因為已經有了
  • 女(啟用 activated)

詳細用法可以參考 Kuro 大整理的文章:
https://book.vue.tw/CH2/2-3-async-dynamic-components.html#%E7%89%B9%E6%AE%8A%E7%9A%84%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-hooks-activated-%E8%88%87-deactivated

表單 step1~3範例

這邊有找到一篇邦友鐵人賽文章:
https://ithelp.ithome.com.tw/articles/10271305

內有非常棒的範例可以參考:
https://codesandbox.io/s/keep-alive-duo-bu-biao-dan-li-zi-21mfo?file=/src/App.vue:28-253

3 <keep-alive> vs <KeepAlive>

這個是很常遇到的問題 究竟在 vue 要寫哪種?
是用 camelCase 寫法
還是 kebab-case (用減號連接單字)?

附上官方解答:
https://cn.vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

結論是如果用在 vue 的 template 都OK

<template>
  <div id="app">
    <keep-alive>
           ...
    </keep-alive>
    <!--上下兩個vue都能解析-->
    <KeepAlive>
           ...
    </KeepAlive>
  </div>
</template>

但是如果是下面這種就只能用 減號相連的 kebab-case，畢竟這是 HTML 的大小寫轉換機制

app.component('demo', {
  template: `<keep-alive><component :is="currentTabComponent"></component></keep-alive>`,
  //...略
});

以上分享