動態元件（Dynamic-Components）是指Vue可以根據傳入參數的，來去切換不同的元件。

如下範例，根據點擊「home」、「posts」或「archieve」，Component會依照 :is 來代入的值來動態決定載入哪一個元件。
https://codesandbox.io/s/cocky-noyce-chv89?file=/src/App.vue

<template>
  <div id="app">
    <ul class="nav">
      <li>
        <a href="#" @click.prevent="changeView('home')">home</a>
      </li>
      <li>
        <a href="#" @click.prevent="changeView('posts')">posts</a>
      </li>
      <li>
        <a href="#" @click.prevent="changeView('archive')">archieve</a>
      </li>
    </ul>
    <component :is="view"></component>
  </div>
</template>

<script>
const home = {
  // options
  template: `
   <p>This is home.<p>
  `,
};
const posts = {
  // options
  template: `
   <p>This is posts.<p>
  `,
};

const archive = {
  // options
  template: `
   <p>This is archive.<p>
  `,
};

export default {
  name: "App",
  components: {
    home: home,
    posts: posts,
    archive: archive,
  },
  methods: {
    changeView(viewName) {
      this.view = viewName;
    },
  },
  data() {
    return {
      view: "home",
    };
  },
};
</script>

當我們點選對應的超連結，便會傳入對應的變數，並利用該變數切會對應的元件。

keep-alive

在動態切換元件過程中，我們可能會希望保存元件的狀態，紀錄元件的狀態，避免重新載入元件，這時候就可以在元件外面包一層keep alive的標籤。

如下範例，第二個元件包了 keep-alive>，因此在切換時不會重新 render 元件，而保留了使用者輸入的資料。

<template>
  <div id="app">
    <ul class="nav">
      <li>
        <a href="#" @click.prevent="changeView('home')">home</a>
      </li>
      <li>
        <a href="#" @click.prevent="changeView('posts')">posts</a>
      </li>
      <li>
        <a href="#" @click.prevent="changeView('archive')">archieve</a>
      </li>
    </ul>
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </div>
</template>

在home tab輸入文字在inputbox再切換別的超連結後再切回home，文字仍然存在在inputbox中，但如果沒有加上keep-alive，便會發現home的inputbox被清空了，這是因為元件被重新載入囉!

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#