vue 實現tab切換動態載入不同的元件

vue 實現tab切換動態載入不同的元件

使用vue中的is特性來載入不同的元件。具體看如下程式碼；這個功能對於vue比較複雜的頁面可以使用上，可以把一個頁面的功能拆分出來，使程式碼更簡單。使用方式具體看如下程式碼：

主頁面程式碼如下，分別匯入了child1.vue, child2.vue, child3.vue 3個小模組，當點選頁面某一項的時候去載入不同的元件。

<style>
  
</style>
<template>
  <div>
    <h2>vue 動態元件實現tab切換載入不同的小模組</h2>
    <div>
      <a href="javascript:void(0)" @click="tabChange(child1)">第一項</a>
      <a href="javascript:void(0)" @click="tabChange(child2)">第二項</a>
      <a href="javascript:void(0)" @click="tabChange(child3)">第三項</a>
    </div>
    <!--
      動態地繫結到它的 is 特性，我們讓多個元件可以使用同一個掛載點，並動態切換。
    -->
    <div :is="currentView"></div>
  </div>
</template>

<script>
 // 匯入子元件
 import child1 from '@/components/child1';
 import child2 from '@/components/child2';
 import child3 from '@/components/child3';

 export default {
   data () {
     return {
       child1: 'child1',
       child2: 'child2',
       child3: 'child3',
       currentView: 'child1' // 預設選中第一項
     };
   },
   methods: {
     tabChange(tabItem) {
       this.currentView = tabItem;
     }
   },
   components: {
     child1,
     child2,
     child3
   }
 };
</script>

子元件child1.vue程式碼如下：

<style>
  
</style>

<template>
  <div>我是第一個子元件</div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

子元件child2.vue程式碼如下：

<style>
  
</style>

<template>
  <div>我是第二個子元件</div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

子元件child3.vue 程式碼如下：

<style>
  
</style>

<template>
  <div>我是第三個子元件</div>
</template>

<script>
  export default {
    data() {
      return {
      }
    }
  }
</script>

檢視github上的原始碼