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>
35自学编程 (作者)
我现在还没遇到vue2和vue3的真正区别的bug,我还是按vue2的写法在写,基本没遇到什么问题,vue3的emits我还是不明白在什么情况下会用到,可能是我是自学的,都是用到什么学什么,没有被系统教育过,很多东西不理解
2022-11-27 03:22