[Vue.js] component 的 動態元件（Dynamic-Components）:is

我們要使用 component 可以再定義後直接使用像這樣：

我們可以利用 vue 的 is 去設定要讀取哪個 component 如下：

<component is="home"></component>

is 就可以指定你要讀進來的 component

所以我們利用這個來做一個動態切換 component 的效果，按了 tab 後就去切換要讀取的 view 就好了。

<div id="app">
  <ul class="nav">
  <li class="nav-item" @click="changeView('home')">
    <a class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" @click="changeView('shop')">Shop</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" @click="changeView('contact')">Contact</a>
  </li>
</ul>
  <component :is="view"></component>
</div>

let app=new Vue({
  el: "#app",
  data: {
    view: "home"
  },
  methods: {
    changeView: function(tab){
      this.view=tab;
    }
  }
})

完成結果：