vue3学习(九)动态组件 实现 tab切换

让多个组件使用同一个挂载点,并动态切换,这就是动态组件。

在挂载点使用component标签   

引入组件

import AVue from './components/abComponrnts/A.vue'
import BVue from './components/abComponrnts/B.vue'

组件实例信息 

如果你把组件实例放到Reactive Vue会给你一个警告:Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 

Vue 收到一个组件,它被做成一个反应性对象。这可能会导致不必要的性能开销,应通过使用“markRaw”标记组件或使用“shallowRef”而不是“ref”来避免。

const comId = shallowRef(AVue)
const dataCom = reactive([
    {
        name:'A组件',
        com:markRaw(AVue)
    },{
        name:'B组件',
        com:markRaw(BVue)
    }
])

 遍历dataCom

设置动态样式active

设置点击切换事件

    
{{ item.name }}

完整ts代码


效果

vue3学习(九)动态组件 实现 tab切换_第1张图片

 

你可能感兴趣的:(学习,vue,typescript,前端)