一、引入
掌握程度 :了解
使用Vue时,有时会遇到tab切换,如下图:
1. 可实现方法:
(1) v-if
(2) component动态组件
(3) 使用vue-Router 路由切换
2.对比
第一种方法 v-if ,这可能是我们能最快想到的解决办法,但是v-if并不是最佳解决办法
v-if 在运用时,渲染所有节点,这意味着,当用户还未点击tab进行切换导航的时候,用户就已经被动的将所有资源加载了,这种情况不利于前端性能优化,因此在这里我们将 v-if 的方法当作最后的救命稻草(尽量不使用)
第二种方法 动态组件 ,动态组件是在模板中定义的一个组件挂载点,将多个组件同时挂载这个挂载点上面,就可以进行动态切换,动态组件通常使用 Vue 的 <component>
元素和特殊的is attribute
实现,当使用 <component :is="...">
来在多个组件间作切换时,被切换掉的组件会被卸载(比v-if性能更加优秀)。
第三种方法,vue-Router,在 vue-Router中,搭配router-link
与router-view
来实现,关于vue-Router详细使用方法教程,后续会陆续发布在我的csdn博客中…
二、动态组件
- 创建一个多组件挂载点
通常使用vue模板中的component
元素和特殊的is
属性 实现,例如:
<component :is="component names"> </component>
- :is属性中应该传入 :is 的值可以是,被注册的组件名或者导入的组件对象
例如定义对象tab:
//先引入A,B,C三个组件
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
//定义或引入了A,B,C变量以后,可以在定义对象时,省略key:value中的value
const tabs = {
A,
B,
C
}
- 在定义完所需要的组件对象以后,在模板中使用v-for,以及component元素实现动态组件
<div>
<button v-for="(value,key) in tabs"
:key="key"
@click="currentTab = value"
class="btn"
>{
{ key }}</button>
<component :is="currentTab" class="tab"></component>
</div>
- 最后实现的效果图
(相关css效果可以自己进行设置,本文不再赘述CSS样式调节)
特别注意!!
1… v-for在循环对象时,可以提供三个值,value,key index 三个值位置不可更换!
v-for="(value,key,index) in tabs"
2. 多个组件不仅可以定义一个组件对象,也可以定义一个对象数组
const List = reactive(
{
name:'A', //字符串记录组件名
cpn:A // 组件变量
},
{
name:'B',
cpn:B
}
)
文末
感谢阅读,还望支持!欢迎学习交流,如有错误,还请指正!
已更新于2022/11/28