vue3+ts深入组件（四）动态组件

一、引入

掌握程度 ：了解

使用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博客中…

二、动态组件

1. 创建一个多组件挂载点
   通常使用vue模板中的component 元素和特殊的 is 属性 实现，例如：

	  <component :is="component names"> </component>

1. :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
	}

1. 在定义完所需要的组件对象以后，在模板中使用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>

1. 最后实现的效果图
   （相关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