Vue3 第十二篇：动态组件和异步注册组件

文子阳

已于 2022-06-19 09:43:37 修改

阅读量1.7k

点赞数

分类专栏： vue Vue3 文章标签： vue.js 前端 elementui

于 2022-06-17 23:45:51 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/125341773

版权

vue 同时被 2 个专栏收录

101 篇文章 24 订阅

订阅专栏

42 篇文章 13 订阅

订阅专栏

本文介绍了在Vue中实现动态组件注册和切换的方法，包括异步组件的使用、动态改变组件及参数传递。通过示例代码展示了如何将组件路径作为参数，以及如何在Pinia状态管理库中存储和更新组件URL，实现更灵活的组件管理。

摘要由CSDN通过智能技术生成

1.异步注册组件

const HomeVue = defineAsyncComponent(() => import('@/views/home/Home.vue'))

这不是真正的动态注册，后面路径无法动态传参，需要研究一下

2.动态组件

<component :is=current.comName></component>
<el-button type="success" @click="change()">切换组件</el-button>

// 载入组件
const HomeVue = defineAsyncComponent(() => import('@/views/home/Home.vue'))
const UserListVue = defineAsyncComponent(() => import('@/views/user/UserList.vue'))


// 定义参数
let current = reactive({ comName: markRaw(HomeVue) })


// 切换组件
const change = () => {
    current.comName = markRaw(UserListVue)
}

3.简写一下：

let current = reactive({
    com:markRaw(defineAsyncComponent(() => import('@/views/home/Home.vue')))
})

// 切换组件
const change = () => {
    current.com = markRaw(defineAsyncComponent(() => import('@/views/user/UserList.vue')))
}

4.在改进一下，把url提出来，当做参数传入：

// 定义初始组件
let current = reactive({
    com: markRaw(defineAsyncComponent(() => import('@/views/home/Home.vue')))
})

const url = import('@/views/user/UserList.vue')
// 切换组件
const change = () => {
    current.com = markRaw(defineAsyncComponent(() => url))
}

5.把url放到pinia中