vue使用动态组件实现TAB切换效果-12346知识网

这篇文章主要介绍了vue使用动态组件实现TAB切换效果的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

问题描述

tab切换的场景在开发中会经常用到。当需要实现这种效果的时候，我们常常会想到下面的方式去实现这个效果。

方式一使用display:none;去控制dom元素的显示与隐藏。从而实现，两个tab的显示与隐藏。不过如果有三四个tab要切换的话，这种方式就不可取了。
方式二使用vue中的指令v-if或者v-show实现。这种方式可以实现，不过代码写的不优雅。试想一个.vue文件中出现一大把v-if是什么样的效果？而且使用v-if还得声明很多的变量去做标识。所以不是十分好的的解决方案
方式三使用elementui或者iview中的tab切换组件这种方式也还行，不过有的时候需要/deep/改样式，就有点麻烦了。

笔者认为，使用vue的动态组件去实现tab的切换效果，会比较方便。

什么是vue的动态组件

vue的动态组件，本质上还是一个组件，组件通俗来说就是一块具有js逻辑的UI视图层。所谓动态组件就是我们可以根据一些条件去动态控制页面的某个地方具体显示那个组件。这样说就有点tab切换的味道了。

应用场景描述

需求效果图

其实很简单，就是一个tab切换的效果，当然实际开发中，tab的样式效果可能会稍微复杂点。

实现步骤

第一步（新建组件并引入注册）

首先在components文件夹下定义四个.vue文件，作为tab切换呈现的内容部分，引入既可使用。

新建

引入并注册

 import one from "./components/one"; import two from "./components/two"; import three from "./components/three"; import four from "./components/four"; components: { one, two, three, four, },

第二步（布局，上面放tab点击的标签，下面放组件呈现对应内容）

 // 动态组件标签有一个is属性，is的值为谁，就可以渲染谁， // 这里我们先用一个变量componentId存起来,componentId为谁，就呈现谁   // 我们默认就让第一个第一个呈现吧，同时需要让cardList中的组件名和组件id对应上， // 所以data中应该修改成这样 data() { return { whichIndex: 0, componentId: "one", // 值就是我们在components对象中注册的引入的组件的名字 cardArr: [ { componentName: "动态组件一", componentId: "one", // 要与之对应 }, { componentName: "动态组件二", componentId: "two", // 要与之对应 }, { componentName: "动态组件三", componentId: "three", // 要与之对应 }, { componentName: "动态组件四", componentId: "four", // 要与之对应 }, ], }; }, 