Day 12 - 动态组件（Dynamic Components）

动态元件（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被清空了，这是因为元件被重新载入罗!