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>