这次写的内容是之前都没使用过的，所以就尽量让自己有概念，希望之後能使用到。

使用 v-bind:is 来切换模组

切换模组的基本语法

<component :is="currentComponent"></component>

currentComponent 是用来决定目前使用的模组是哪一个。

透过全域注册来设定模组

<button v-for="tab of tabs" :key="tab" @click="currentTabComponent = tab">{{ tab }}</button>
<component :is="currentTabComponent"></component>
<script>
Vue.component('home',{
  template:`<div>I am home!</div>`
})
Vue.component('shop',{
  template:`<div>I am shop!</div>`
})
Vue.component('rate',{
  template:`<div>I am rate!</div>`
})
const vm = new Vue({
  el:'#vm',
  data:{
    tabs:['home','shop','rate'],
    // 指定当前欲显示的模组'名'
    currentTabComponent:'home'
  }
})
</script>

在 data 中设定的 currentTabComponent 为当前欲显示的模组， currentTabComponent 值为模组名，并透过 <component :is="currentTabComponent"></component> 中的 Attribute is 绑定 currentTabComponent ，指定显示的模组内容。

透过在 data 设定物件

<button v-for="tab of tabs" :key="tab.name" @click="currentTabComponent = tab">{{ tab.name }}</button>
<component :is="currentTabComponent"></component>
<script>
const tabs = [{
  name: 'home',
  template: `<div>I am home!</div>`
},
{
  name: 'shop',
  template: `<div>I am shop!</div>`
},
{
  name: 'rate',
  template: `<div>I am rate!</div>`
}]

const vm = new Vue({
  el:'#vm',
  data:{
    tabs: tabs,
    // 指定当前欲显示的模组 '物件'
    currentTabComponent: tabs[0]
  }
})
</script>

透过物件处理模组的资料(如模组名及模板)，并且 currentTabComponent 的值为模组资料，而非模组名。

使用 <keep-alive> 建立动态模组缓存

在一般情况下，Vue 是透过建立新的模组，来执行模组的切换(动态模组)，但这样一来，当我们在 A 模组点选或写下东西後，切换到 B 模组，在执行别的事情後，再返回 A 模组，会发现原本在 A 模组点选或写下的东西都会消失(回复成初始的模组状态)。

这样的情况可以透过 <keep-alive> 来解决， <keep-alive> 主要是用来将没使用到的模组缓存起来(就是将模组最後一次出现的状态储存起来)，也因此在切换的过程中，模组的状态不会因为切换而消失。

<button v-for="tab of tabsC" :key="tab" @click="keepAliveComponent=tab">{{tab}}</button>
<!--<keep-alive>用来包裹欲被缓存的模组-->
<keep-alive>
<component :is="keepAliveComponent"></component>
</keep-alive>
<script>
Vue.component("A", {
  template: `<div>I am A!</div>`
});
Vue.component("B", {
  template: `<div>I am B!</div>`
});
Vue.component("C", {
  template: `<div>I am C!</div>`
});

Vue.component("posts", {
  template: `<div>
  <button v-for="title of titles" :key="title" @click="currentPostComponent=title">{{title}}</button>
  <component :is="currentPostComponent"></component>
  </div>`,
  data() {
    return {
      titles: ["A", "B", "C"],
      currentPostComponent:'A'
    };
  }
});

Vue.component("archives", {
  template: `<div>
  <input type="text">
  </div>`
});

const vm = new Vue({
  el: "#vm",
  data: {    
    tabs: ["posts", "archives"],
    keepAliveComponent: "posts"
  }
});
</script>

<keep-alive> 属性 include 及 exclude

• v-bind:include="/reg/" ：值为正规表达式，只有符合该值的模组才能被缓存。

• include="string" ：值为字符串，只有符合该值的模组才能被缓存。

• v-bind:exclude="/reg/" ：值为字符串或正规表达式，只有不符合该值的模组才能被缓存。

• exclude="string" ：值为字符串或正规表达式，只有不符合该值的模组才能被缓存。

提醒：如果值为字符串的话，就不需使用 v-bind 来绑定了！

<button v-for="tab of tabsC" :key="tab" @click="keepAliveComponent=tab">{{tab}}</button>
<!--只有 posts 模组才能被缓存-->
<!--所以 archives 模组写下文字，切换模组之後，该文字不会被缓存起来-->
<keep-alive :include="posts">
<component :is="keepAliveComponent"></component>
</keep-alive>
<script>
Vue.component("A", {
  template: `<div>I am A!</div>`
});
Vue.component("B", {
  template: `<div>I am B!</div>`
});
Vue.component("C", {
  template: `<div>I am C!</div>`
});

Vue.component("posts", {
  template: `<div>
  <button v-for="title of titles" :key="title" @click="currentPostComponent=title">{{title}}</button>
  <component :is="currentPostComponent"></component>
  </div>`,
  data() {
    return {
      titles: ["A", "B", "C"],
      currentPostComponent:'A'
    };
  }
});

Vue.component("archives", {
  template: `<div>
  <input type="text">
  </div>`
});

const vm = new Vue({
  el: "#vm",
  data: {    
    tabs: ["posts", "archives"],
    keepAliveComponent: "posts"
  }
});
</script>

因为对於异步模组的部分研究的还不够，看起来还可以加上 webpack 的使用，但对於 webpack 的研究也还不够，所以这一块就先不写出来了！

Demo:DAY15 | 跟 Vue.js 认识的30天 - Vue 动态模组(Dynamic Components)

参考资料：

Vue.js - 动态组件 & 异步组件

Vue.js -keep-alive