vue3用什么方法代替vue2 的组件懒加载方法vue3/ import.meta.globEager , vue2/ require.context

分类：uni-app

vue3不支持 require.context的方法，使用 import.meta.globEager方法在vue3无法渲染组件，
在vue3如何实现下面方法？

下面是是vue2的写法没有问题，

<template>  
    <view class="content">  
        <component is="home1"></component>  
    </view>  
</template>  

<script>  
    // const modulesFiles = import.meta.globEager('./pages/*.nvue')  
    const modulesFiles = require.context('@/pages/index/pages/',true, /\.nvue$/);    
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {    
          const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')    
          const value = modulesFiles(modulePath)    
          modules[moduleName] = value.default  
          return modules    
        }, {})  
    export default {  
        components:modules,  
        data() {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content{  
        justify-content: center;align-items: center; display:flex;  
        width:750rpx;  
        height:750rpx;  
    }  
</style>

2022-11-24 15:34 负责人:无分享

4 个回复

呆狗的一生 - 呆狗的一生

我的感觉，uniapp的vue2和vue3分别是webpack和vite，才造成了两种不同的加载组件的方法。

35自学编程 (作者)

我现在还没遇到vue2和vue3的真正区别的bug，我还是按vue2的写法在写，基本没遇到什么问题，vue3的emits我还是不明白在什么情况下会用到，可能是我是自学的，都是用到什么学什么，没有被系统教育过，很多东西不理解

2022-11-27 03:22

35自学编程 (作者) - 能成否

我的表达可能不清楚，不是说vue3引入组件不需要注册组件吗，为什么在uniapp的vue3还需要注册组件

下面是走通的方法，希望有人出来解答一下

<template>  
    <view class="content">  
        <component :is="componentIs"></component>  
        <button type="default" @click="tap">点击</button>  
    </view>  
</template>  

<script>   
    const components = import.meta.globEager("./*.vue")  
    let cons = {}  
    Object.keys(components).forEach(key => {  
        cons[components[key].default.name] = components[key].default  
    })  
    console.error(cons,'cons')  
    export default {  
        components:cons,  

        // components:{test:'test'},  
        data() {  
            return {  
                componentIs: 'test'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            tap(){  
                this.componentIs = 'test2'  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
         justify-content: center;align-items: center; display:flex;    
         width:750rpx;    
         height:750rpx;  
    }  

</style>

呆狗的一生 - 呆狗的一生

据我所知，组件要符合easycom组件规范才不用手动注册吧！只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。你是在哪里看到或是听到vue3不用注册组件的？

呆狗的一生

或者是vue3真不用注册？？

2022-11-25 23:25
35自学编程 (作者)

你说的方法在vue2或3，都是一个道理的，都能实现的，之前刚开始看vue3文档的时候，我印象明明看到过vue3 引入组件，根据规范在组件加入name：‘****’，页面上就不需要在注册组件的这一步，

2022-11-27 03:18
呆狗的一生

回复 35自学编程: 这是基础内容了，怎么可能加上name属性就不用注册了，天方夜谭了！你能放个链接，我也去看看吗？

2022-11-27 04:23

呆狗的一生 - 呆狗的一生

require.context和import.meta.globEager我都没有用过，经过我前两天看文档后，我感觉得好理解！我先是在nodejs环境中测试，require并没有context方法或属性。查看《ECMAScript 6 教程》，和《vite官方中文文档》后，发现globEager方法来自vite。并没有什么疑惑

要回复问题请先登录或注册

vue3用什么方法代替vue2 的组件懒加载方法vue3/ import.meta.globEager , vue2/ require.context

4 个回复

公告

相关问题

vue3用什么方法代替vue2 的组件懒加载方法vue3/ import.meta.globEager , vue2/ require.context

与内容相关的链接

4 个回复

公告

相关问题