位置: IT常识 - 正文

vue3 使用defineAsyncComponent与component标签实现动态渲染组件(vue3.0用法)

发布时间：2024-01-10

vue3 使用defineAsyncComponent与component标签实现动态渲染组件

推荐整理分享vue3 使用defineAsyncComponent与component标签实现动态渲染组件(vue3.0用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3.0用法,vue3使用ref,vue3使用ref,vue3使用ref,vue3使用ref,vue3使用$refs,vue3 definecomponent,vue3使用ref,内容如对您有帮助，希望把文章链接给更多的朋友！

内容有些啰嗦，内容记载了当时遇到了bug以及解决问题的思路。

业务场景简述：前端做配置化组件，通过url内的唯一标识，请求后端sql 哪取页面配置信息，前端通过配置信息动态渲染查询表单，导出、表格，toolbar以及动态弹窗；该动态渲染组件的功能，就是渲染的toolbar内的按钮，类型为自定义弹窗，弹窗路径为后端配置数据，前端通过点击该按钮，打开指定路径下的弹窗组件。

vue3 使用defineAsyncComponent与component标签实现动态渲染组件(vue3.0用法)

之前用的vue2的动态挂载组件，也没见vue3那么麻烦，官网上的例子以及网上的所以例子都是前端知道要导哪些组件，然后程序进入就直接导进来了，只是写了逻辑动态切换。我这个不一样，需要挂载的组件是未知的。所以实现起来有点吃力。

一、基础的动态引入组件：简单的动态引入的意思是，前端知道要引入哪些组件，将多个组件引入到父组件中，但不渲染它，满足一定条件后，才去在某个位置渲染指定的组件。

<template> <custom-modal ref="custom"></custom-modal></template><script> import { reactive, ref, shallowReactive, onActivated, defineAsyncComponent, } from 'vue'; const customModal = defineAsyncComponent(() => import('./modal/CustomModal.vue')); const custom = ref(); </script>

以上的例子就是通过vue的defineAsyncComponent实现挂载组件，并赋值给customModal ，模板中可以直接使用<custom-modal>作为标签使用,也可以将它赋值给component中的is属性，is属性执向一个变量，可通过业务逻辑动态，更改该变量的值，就可以实现多个组件进行来回的渲染了

<template><component :is="componentKey" ref="custom"></component></template> import { reactive, ref, shallowReactive, onActivated, defineAsyncComponent, } from 'vue'; const componentKey = ref(null); const components: any = shallowReactive({}); const customModal = defineAsyncComponent(() => import('./modal/CustomModal.vue')); componentKey = customModal

二、复杂的引入：不确定到底引入什么组件，组件的路径由后端返回将以上代码添加到项目代码中，并不能实现，虽然引入不报错，但是ref一直为undefined，无法调用动态组件内的open函数。不断尝试了很多次，得出以下结论

1.起初是在按钮的click函数内去挂载自定义组件并调用ref函数的，ref为undefined。尝试多次不能实现功能（这里是挂载与调用最合适的位置），2.接着又在初始化配置数据时（查询后端sql），axios的then函数内挂载组件，然后点击按钮的地方调用ref内的函数，ref依旧为null。3. 接着在最外层，调用初始化时挂载，也就是生命周期函数体内，测试还是一样的结果。4. 接着发现带有async函数体内挂载组件，也无法完成。5.单独写个函数，不加async，函数内挂载组件，然后再生命周期外调用该函数，按钮内调用ref内的方法，成功弹窗。这并不是我想要的，因为路径不是固定的，它要等到后端sql放回结果，才能执行。