在 vue 中，實現 Tab 切換主要有三種方式：使用動態組件，使用 vue-router 路由，使用第三方插件。

因為這次完成的功能只是簡單切換組件，再則覺得使用路由切換需要改變地址略微麻煩，所以使用的是動態組件實現，如果是在大型應用上，可能使用 vue-router 會方便一些。

先看下最終實現的效果，結構比較簡單，頂部的三個 Tab 標簽用于切換，內容區域分別為三個子組件。

　　

關鍵代碼及分析如下：

<template> // 每一個 tab 綁定了一個點擊事件，傳入的參數對應著 tab 下的組件名 <div class="tabs"><div class="tab" @click="toggleTab('prince')"><a>小王子</a></div><div class="tab" @click="toggleTab('rose')"><a>小玫瑰</a></div><div class="tab" @click="toggleTab('fox')"><a>小狐貍</a></div> </div> // 子組件，顯示不同的 tab // is 特性動態綁定子組件 // keep-alive 將切換出去的組件保留在內存中 <prince :is="currentTab" keep-alive></prince> </template><script> // 引入子組件 import prince from './components/prince'; import rose from './components/rose'; import fox from './components/fox'; export default {name: 'app',data () {return {currentTab: 'prince' // currentTab 用于標識當前觸發的子組件 };},components: { // 聲明子組件 prince,rose,fox},methods: {toggleTab: function(tab) {this.currentTab = tab; // tab 為當前觸發標簽頁的組件名 }} } </script>

使用動態組件實現 Tab 標簽頁切換的基本過程可以概括為：

• 在父組件中定義一個主 tab 標簽頁，用于切換，同時為每個 tab 綁定點擊事件，傳入該 tab 的子組件名，最后引入并定義子組件
• 子組件中是各 tab 標簽頁的內容
• 使用 is 特性動態切換子組件，使用 kee-alive 緩存

轉載于:https://www.cnblogs.com/yuerdong/p/9233743.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的vue -- 动态加载组件 （tap 栏效果）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。