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>我是第1个子组件</div>
</template><script>export default {data() {return {}}}
</script>

子组件child2.vue代码如下：

<style></style><template><div>我是第2个子组件</div>
</template><script>export default {data() {return {}}}
</script>

子组件child3.vue代码如下：

<style></style><template><div>我是第3个子组件</div>
</template><script>export default {data() {return {}}}
</script>

vue 实现tab切换动态加载不同的组件相关推荐

render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
vue 项目如何实现动态加载路由？
一般来说,vue项目实现动态路由的方式大体可分为两种: 前端把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 后台接口提供当前用户对应权限的路由表,前端通过调接口拿到后处理(后 ...
vue+antdesign导航菜单动态加载
2019独角兽企业重金招聘Python工程师标准>>> antdesign侧边栏菜单,需根据后台返回的数据动态加载菜单列表,在循环填充时会遇到子菜单项<a-sub-menu&g ...
Vue在路由中懒加载并创建组件，省去写页面的步骤
需求现在有一个公共组件,在多个端都需要使用,但传入组件的参数不同,每个端都要写个vue的页面或是component有点麻烦. <template><child blPath=&qu ...

vue 实现tab切换动态加载不同的组件

vue 实现tab切换动态加载不同的组件

vue 实现tab切换动态加载不同的组件相关推荐

最新文章

热门文章