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

本篇内容介绍了“vue3如何使用defineAsyncComponent与component标签实现动态渲染组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、基础的动态引入组件：

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

以上的例子就是通过vue的

defineAsyncComponent

实现挂载组件，并赋值给

customModal

，模板中可以直接使用



作为标签使用,也可以将它赋值给component中的is属性，is属性执向一个变量，可通过业务逻辑动态，更改该变量的值，就可以实现多个组件进行来回的渲染了

import{reactive,ref,shallowReactive,onActivated,defineAsyncComponent,}from\'vue\';constcomponentKey=ref(null);constcomponents:any=shallowReactive({});constcustomModal=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函数体内挂载组件，也无法完成。

活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看5.单独写个函数，不加async，函数内挂载组件，然后再生命周期外调用该函数，按钮内调用ref内的方法，成功弹窗。这并不是我想要的，因为路径不是固定的，它要等到后端sql放回结果，才能执行。

总结：上面的多次测试，得出以下结论，都不能让动态组件ref对象有值

1、不能在组件的事件函数内挂载，

2、不能在axios的then函数体内挂载

3、不能在带有async声明的函数体内挂载

4、不能在vue的生命周期内挂载

5、只能在最外层挂载实现，这时ref才是个对象。

好在天无绝人之路；脑海里有个思路：

页面初始化时将项目里所有的全局挂载view组件扔到一个object内，使用component组件，is：对应object内指定的组件对象，然后通过后端的数据，这时后端就不用给组件路径了，给个组件名，我从object中找到挂载的组件然后将对象给is。


const modules = import.meta.glob(\'@/views/*/**.vue\');

// 获取所有项目路径

mudules为views内所有的vue的相对路径，然后循环它，在循环体内实现挂载，将它存入一个对象内，key为相对路径的项目名称（可以截取以下）。

有了上面的思路，通过反复测试和实现，最终功能实现了。

按钮点击触发事件，确定弹窗要弹出什么组件

}elseif(action.modalCfg.type===\'CustomModal\'){//这里的actionid和组件是对应的，所以在按钮触发后，通过按钮携带的actionid能取到对应的组件。componentKey.value=components[action.actionId];custom.value.init(row);}

经过以上的方式：在任何地方挂载都不会报错，完美解决。

注意：挂载与使用ref不能在同一个方法体内，如果可以的话，页面加载时，执行挂载，需要调用ref时就不会报错。

“vue3如何使用defineAsyncComponent与component标签实现动态渲染组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注服务器测评网网站，小编将为大家输出更多高质量的实用文章！