如何在"<script setup>“中使用"require.context”定义组件？
在 <script setup> 中使用 require.context 定义组件的方法如下：
- 首先，确保你的项目使用了 Vue 3 版本及以上，并且已经安装了
@vue/compiler-sfc。 - 在
<script setup>中，可以使用require.context方法来动态地导入组件。require.context是 Webpack 提供的一个函数，用于在编译时动态地获取指定目录下的所有模块。 - 首先，需要在项目的某个目录下创建一个专门存放组件的文件夹，例如
components。 - 在
components文件夹中，按照你的组件结构创建子文件夹，并将各个组件文件放入相应的子文件夹中。 - 在
<script setup>中，使用require.context方法来获取组件文件夹中的所有组件模块。可以通过传入文件夹路径、是否递归查找子文件夹以及匹配文件的正则表达式来配置require.context。 - 在
<script setup>中，使用require.context方法来获取组件文件夹中的所有组件模块。可以通过传入文件夹路径、是否递归查找子文件夹以及匹配文件的正则表达式来配置require.context。 - 上述代码将会获取
components文件夹及其子文件夹中所有以.vue结尾的文件。 - 使用
components.keys()方法获取到所有组件的路径数组，然后可以通过遍历这个数组来动态导入组件。 - 使用
components.keys()方法获取到所有组件的路径数组，然后可以通过遍历这个数组来动态导入组件。 - 上述代码中的
components(filePath).default表示获取到的组件模块的默认导出。 - 在遍历过程中，你可以根据需要对组件进行处理，例如将组件注册到全局或者局部导入到其他组件中使用。
- 在遍历过程中，你可以根据需要对组件进行处理，例如将组件注册到全局或者局部导入到其他组件中使用。
- 注意，如果你需要在
<template>中使用动态导入的组件，需要使用defineAsyncComponent方法进行包装。
至此，你已经学会了在 <script setup> 中使用 require.context 定义组件的方法。这种方法可以方便地批量导入组件，提高开发效率。在实际应用中，你可以根据具体的项目需求和组件结构进行灵活的调整和扩展。
腾讯云相关产品推荐：
- 云函数 SCF（Serverless Cloud Function）：提供无服务器的函数即服务（Function as a Service，FaaS）能力，支持多种语言，适用于快速开发和部署云端业务逻辑。 产品介绍链接：云函数 SCF
- 云开发 CloudBase：提供全栈云开发能力，包括云函数、云数据库、云存储等，支持前后端一体化开发，提供丰富的开发工具和资源，助力开发者快速构建应用。 产品介绍链接：云开发 CloudBase
请注意，以上推荐的产品仅为腾讯云的部分产品，更多产品和详细信息请参考腾讯云官方文档。
相关·内容
我尝试编写一个容器组件"A“来布局第三方组件"Tree"，为了使用A，我使用"inheritAttrs”来获取“Tree”的所有道具和事件：
<template>
<Tree v-bind="$attrs" />
</template>
<script lang="ts">
export default {
inheritAttrs: true,
};
</script>
<script lang="ts" setup>
浏览 8提问于2022-03-22得票数 12
回答已采纳
我正在使用实验性的创建一个学习环境。我有一个自制的导航栏，打开一个组件。
我在使用<component :is="" />方法时遇到困难。这种方法是在下的文档中描述的。
在Vue 3组合API中，它按预期工作：
<template>
<NavigationBar
@switchTab="changeTab"
:activeTab="tab"
/>
<component :is="tab" />
</template>
<script&g
浏览 2提问于2021-02-26得票数 15
回答已采纳
我想把Vue安置在拉拉维尔6号。
我跑过：
作曲家需要laravel/ui
php手工ui vue
npm安装& npm运行开发
然后在welcome.blade.php内部，我删除了欢迎页面的正文，并添加了一个id为root的div。
我可以让示例组件在浏览器中显示，但是我不能创建任何新组件并让它们在没有错误的情况下显示。我甚至尝试过重命名示例组件，即使这样也不起作用。我将文件重命名为App.vue，然后将所有其他内容重新命名--请参见下面的内容：
app.js
require('./bootstrap');
window.Vue = require('vu
浏览 9提问于2019-10-09得票数 2
回答已采纳
选项API：
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'CustomName', //
inheritAttrs: false, //
setup() {
return {}
},
})
</script>
如何在<script setup>中做到这一点，对于name和inheritAttrs，如defineProps和defineEm
浏览 20提问于2021-05-08得票数 18
回答已采纳
3回答
我正在用nuxt.js做一个项目，我想实现原子设计方法
因此，我目前导入的组件如下
import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'
但我需要像这样进口
import {
ButtonStyled,
TextLead,
浏览 4提问于2019-04-25得票数 2
回答已采纳
我有以下内容：
<SomeModal :is-modal-active="isAddingThing" @close="isAddingThing = false" />
在该组件中，如下所示：
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
isModalActive: Boolean,
})
const handleClose = () => {
emit('close')
浏览 6提问于2021-07-05得票数 26
回答已采纳
( JavaScript已经回答了这个问题，请参见下面的内容，但是这个问题是针对TypeScript的，它的行为不同)
我试图使用类型记录在Vue3.0中使用异步功能。
没有异步，这段代码工作得很好：
// file: components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import {
浏览 9提问于2020-09-29得票数 34
回答已采纳
1回答
我正在从Netlify CMS的图像上拉一个数组，并将它传递给组件，但是尖锐的图像不会呈现，即使路径是正确的等等。
不知道我做错了什么？
模板
vue-picture-swipe(:items="items")
脚本
<script>
export default {
data: function() {
return {
items: []
};
},
created: function () {
浏览 2提问于2019-03-19得票数 1
如何使用添加带有require.context的组件？script setup的RFC示出了this示例。在本例中，必须导入每个组件。 在Options API中，我使用以下代码来收集特定文件夹中的所有组件： function getComponents() {
const context = require.context('../icons', true, /Icon[A-Z]\w+\.vue$/)
const res = {
components: {},
namesForValidator: [],
}
for (const key
浏览 87提问于2021-07-14得票数 0
回答已采纳
1回答
有适当类型的BaseComp基组件，它可以是第三方组件，因此不能重写以满足我们的需要：
<script lang="ts">
...
export default defineComponent({
name: 'BaseComp',
props: {
baseProp: {
type: String,
},
anotherBaseProp: {
type: String,
},
},
...
});
</script>
和MyComp包装器组件：
<temp
浏览 7提问于2022-04-24得票数 0
所以我有Component1，
<!-- Component1 -->
<script lang="ts" setup>
defineProps<{ msg: string }>()
</script>
<template>
<p>{{ msg }}</p>
</template>
然后我将其全局注册，
// main.ts
import { createApp } from "vue"
import App from "./App.vue"
i
浏览 53提问于2021-10-20得票数 3
当我们将一个道具传递给一个组件并用defineProps从子组件中定义该支柱时，就会以某种方式从子组件模板创建和访问属性。
parentComponent.vue
<template>
<child-component v-model="product">
</template>
<script setup>
import childComponent from "./childComponent.vue"
</script>
childComponent.vue
<template&g
浏览 4提问于2022-06-05得票数 0
回答已采纳
如何将v模型值从父组件传递给子组件的子组件？
父组件
<ChildElement v-model="name" />
<script>
import { ref } from "vue";
export default {
setup() {
const name = ref('Nagisa')
}
};
</script>
子组件
<AnotherChildComponent :value="value"/>
<script>
export defa
浏览 8提问于2022-03-27得票数 1
回答已采纳
<script setup lang="ts">
function callSomething() {
something(); //not working
}
onMounted(() => {
function something() {
console.log("Hello, World");
}
});
</script>
<template>
<div>
<button @click="callSomething">Clic
浏览 4提问于2022-03-12得票数 2
回答已采纳
2回答
docs 说，为了使用悬念组件，我们需要使组件“异步”。
<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>
<template>
{{ posts }}
</template>
但是，我不知道如何使用Options来实现组件异步。
浏览 12提问于2022-03-06得票数 0
回答已采纳
2回答
我有一个项目文件夹，其中有很多错误，因为我们已经更新ui到新版本，我们与旧的测试用例失败。我想运行一个单独有十个组件的特定文件夹，并想跳过其他文件夹，因为我们面临着很多问题。
我已经尝试了fdescribe和xdescribe，并尝试更改-> require.context路径的test.ts文件。那么所有文件夹的问题仍然存在。
就是有办法解决这个问题。
浏览 2提问于2020-06-16得票数 1
对于Vue来说，我一般都是新手，目前正在使用3.2.37，我可能认为正确使用复合api的defineExpose指令，如本文所述：
还可以找到一些线程，解释如何在<script setup>内部公开成员，比如。但不知何故，我无法从子组件HelloWorld中公开HelloWorld常量ref，这样就可以在app组件中插入它的version。
app.vue：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template&g
浏览 25提问于2022-08-13得票数 1
1回答
有一个组件具有这样的参考文件：
<template>
<custom-component
ref="func"
/>
</template>
<script setup>
const func = ref();
</script>
在组件内部有一个类似这样的函数：
const helloWorld = () => {
console.log('hello World');
}
如何从父组件访问helloWorld函数？
浏览 4提问于2021-12-16得票数 1
回答已采纳
我正在使用Vue的复合API (在Vue.js 3中)，并主要在setup()中构建组件逻辑。虽然通过setup(props)是直接的，但我无法以一种类型安全的方式公开这里定义为的函数。
下面可以工作，但我需要任意转换，因为没有向TypeScript公开的方法接口。
<!-- MyComponent.vue -->
<script lang='ts'>
// ...
export default defineComponent({
setup() {
// ...
return {
publicFunction: as
浏览 1提问于2021-04-01得票数 3
回答已采纳
1回答
我试图在VUE 3中传递一个道具发射，每次我通过它，我还是会出错，而道具无法切换。
Accordion.vue
<template>
<div class="flex" @click="toggleInfo()">
<slot></slot>
</div>
</template
<script>
export default {
props: {
value: {
required: t
浏览 4提问于2021-03-31得票数 3
回答已采纳
为了复制的目的，我将尝试描述我所做的事情：
基于，我通过npm create vuetify创建了一个新项目
基于，我安装了包vue-i18n并将插件设置更改为
。
import { createVuetify } from 'vuetify'
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
import { createI18n, useI18n } from 'vue-i18n'
const messages = { en: {
浏览 19提问于2022-11-29得票数 0
1回答
在vuejs3应用程序中，我在方法中使用axios从数据库中检索数据，如下所示： <script>
import appMixin from '@/appMixin'
import app from './../../App.vue' // eslint-disable-line
import axios from 'axios'
const emitter = mitt()
export default {
name: 'adminCategoriesList',
mixin
浏览 45提问于2020-11-09得票数 5
回答已采纳
1回答
我想热重新加载所有的反应组件，而不是一个一个地添加文件。
module.hot.accept(['react/a', 'react/b', 'react/c'], function (){})
在我的项目中，我使用require.context使所有js文件重新加载。
'user strict';
import React from 'react';
import ReactDOM from 'react-dom';
import A from 'a'
ReactDOM.rende
浏览 2提问于2017-10-03得票数 1
让我们后退一步，看看用例：
您正在定义一个模块化接口，实现它的任何模块都必须能够“呈现”到给定槽和状态的应用程序中。
你在vue是怎么做的？
示例解
让我们看一看我可以组装的最基本的实现：
(完整示例：)
我们有一个布局：
# Layout.vue
<template>
<div>
<hr />
<slot name="moduleView" />
<hr />
</div>
</template>
带有模块的应用程序...and：
# App.vue
<s
浏览 5提问于2022-06-25得票数 1
我正在尝试以JSON对象的形式获取SPA静态应用程序的资产/插图目录中所有文件的列表，以便在我的Vuex商店中重新使用
资源/插图目录结构为：
assets
illustrations
ill-1
prop-1-1.jpg
prop-1_2.jpg
ill-2
prop-2-1.jpg
prop-2_2.jpg
ill-3
prop-3-1.jpg
prop-3_2.jpg
我的目标是拥有这样的对象：
{ illustrations: [ill-1: [prop-1-1.jpg,
浏览 1提问于2018-02-18得票数 12
回答已采纳
1回答
<script>
export default {
setup() {
}
created() {
}
}
</script>
当我更改为使用脚本设置语法时，如何使用创建的钩子？
<setup script>
// how to use created hook ?
</script>
浏览 5提问于2022-09-27得票数 0
<template>
<RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
</template>
<script setup>
import RecyclablesPopup from "../components/popups/RecyclablesPopup";
import { ref } from 'vue&#
浏览 11提问于2022-07-11得票数 0
回答已采纳
我正试图为svg图标创建一个react，所以我尝试用这样的require.context获取svg文件的上下文
const myIcons = require.context('myIcons/', true, /^\.\/.*\.svg$/)
myIcons('./location.svg')
问题是，我得到的结果是data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...，我希望它返回类似<svg ...><path ..></svg>的东西，就像它在svg文件中一样。
我试着
浏览 11提问于2017-09-03得票数 2
回答已采纳
我在uni-app中使用uni-app安装程序，并且添加了globalData，但是它在安装糖中不起作用：
App.vue
<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
onLaunch(() => {
console.log("App Launch");
});
onShow(() => {
console.log("App Show");
});
onHide(() =
浏览 8提问于2022-02-10得票数 0
1回答
parent.vue
<template>
<input :type="computedType"/>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
type: {
required: false,
type: String,
default: 'text',
},
});
const s
浏览 8提问于2022-11-04得票数 0
回答已采纳
2回答
我正在尝试将某个子文件夹中的所有.vue文件导入另一个组件。我知道Global registration of Base components，但这似乎对我没有帮助。 假设我有默认的Vue组件(不是主组件)，如下所示： export default {
components: {
red: () => import('./panes/red'),
},
data() {
return {
current: false,
};
}, 我的文件结构类似于： /src
- main.js
- main.vue
-- comp
浏览 26提问于2019-02-01得票数 0
回答已采纳
我正在我的项目中编写一个使用Laravel Mix绑定的Vue单页面组件。我希望将一些逻辑提取到它自己的类中，以便可以轻松地在其他组件之间重用(但这不是应该是Vue组件本身的逻辑)。 我创建了一个新类，并将其放在TimeRangeConverter.js中，与我的Vue组件位于相同的目录中。 export default class TimeRangeConverter {
static getFromTimestamp() {
return 1;
}
} 在我的组件中，我像往常一样导入它： <template>
<div>
浏览 53提问于2019-02-03得票数 1
回答已采纳
4回答
我正在尝试学习使用TypeScript编写Vue 3组合API，特别是如何发出具有严格类型的有效负载的事件。
下面有一个例子，但我不确定这是否正确。那么，我的问题是，是否还有其他方法来发出具有严格类型的有效负载的事件？
示例
我使用了这个包：，并让它使用下面的示例，在这个示例中，我将一个布尔值从子组件传递给父组件：
子组件：
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { CompositionAPIEmit } from 'vue-
浏览 4提问于2021-04-14得票数 9
1回答
这是我第一次在VueJS，我们正在创建一个项目在课堂上使用类型记录。我需要将tabsData变量的属性从父组件(视图)传递给子组件(视图组件)。我把密码传给你：
<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/tra
浏览 7提问于2022-06-10得票数 1
我开始在我的Laravel项目中使用vue js。我安装了所有包，但问题是当我试图在另一个组件中调用组件并运行以下命令时：
npm run dev
我犯了webpack的错误。
我的守则：
父组件TabelReception.vue：
<template>
<stats-card></stats-card>
<table class="table">
<tbody>
</tbody>
</table>
</template>
<
浏览 3提问于2020-04-10得票数 0
回答已采纳
我一直试图在我的vue3-runtime-template示例项目中使用vue3动态编译自定义vue模板。我还遵循了官方文档为这个库提供的配置指令：
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
// ...
},
},
},
};
这应该允许在运行时进行编译。当我使用Options API (使用data：() =>
浏览 3提问于2021-03-12得票数 0
2回答
我需要在Vue 3+ Vite中，从正在使用它的另一个组件中对整个组件进行样式化。我试图将类设置为component标记，但它只是不起作用。
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld class="hello"/>
</template>
<style scoped>
.hello {
display: none;
}
&
浏览 1提问于2022-02-19得票数 1
回答已采纳
我有一个Angular CLI项目，它的NgModule位于/src文件夹之外(最终这个NgModule将被打包成一个npm模块，但现在我只是把它留在/src之外)。
我正在尝试为这个NgModule编写单元测试，但是ng test似乎没有在/src文件夹之外拾取.spec.ts文件。
我已经尝试在/src/test.ts中更改路径
// Original
const context = require.context('./', true, /\.spec\.ts$/);
// Does not work
const context = require.context(&#
浏览 2提问于2017-11-18得票数 7
1回答
我在这里问了一个问题，，但没有得到任何帮助。所以我试图改变逻辑，不幸的是没用。我有一个带有数组的父组件。此子组件应呈现该数组，并以某种方式呈现本地文件夹中的图像。文件夹名等于project.image。
子组件
export default class Child extends Component {
render() {
const { project } = this.props;
function importAll(r) {
return r.keys().map(r);
}
const folder1 = importAll(require
浏览 3提问于2020-08-08得票数 0
回答已采纳
为什么setup(props) { props.id }从watchEffect(() => fetch(getUrl())回调返回undefined (Vue 3 watchEffect函数)？
使用函数useFetch(() => url)的示例
也就是说，
const { data, error, isPending } = useFetch(() => https://jsonplaceholder.typicode.com/todos/${props.id})
对https://jsonplaceholder.typicode.com/todos/undefined
浏览 0提问于2021-05-10得票数 1
回答已采纳
我有一个使用windows的组件，所以我只使用客户端呈现它，比如：
<template>
<h2>Testing Component2</h2>
<client-only>
<Component2></Component2>
</client-only>
</template>
<script lang="ts">
import Component2 from './component-2'
export default defi
浏览 13提问于2022-11-03得票数 0
回答已采纳
1回答
我正在构建一个Gatsby应用程序，我需要插入一些SSI行(样式为HTML注释)。示例
<!--#set var="section" value="#{section}"-->
<!--#include virtual="/virtual/3.0/script-app.inc"-->
我不知道该怎么做。
我需要将这些(和其他脚本)放在head标记之前、head标记内、body标记的末尾和紧跟在它后面。
我试过很多方法，但都不管用。我尝试过更改html.js，但它只是去掉了输出代码中的注释。我也尝试过使用gatsby-ssr
浏览 6提问于2019-11-06得票数 0
我在试着列出几组图像。我在./assets中有多个文件夹
./assets
├── 1x3
│ ├── 1.jpg
│ ├── 2.jpg
│ └── 3.jpg
└── 3x3
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
├── 5.jpg
├── 6.jpg
├── 7.jpg
├── 8.jpg
└── 9.jpg
我更喜欢循环遍历./assets中的子文件夹，循环遍历每个子文件夹中的图像。我试着在网上寻找解决方案，但它们似乎不起作用。
我试过了：
import Re
浏览 1提问于2020-10-01得票数 3
5回答
我想从父级获取vue.js组件的维度(我正在使用实验性的)。
当我在组件中使用ref时，它会像预期的那样工作。我知道尺寸：
// Child.vue
<template>
<div ref="wrapper">
// content ...
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const wrapper = ref(null)
onMounted(() => {
cons
浏览 4提问于2021-04-10得票数 25
回答已采纳
1回答
在我的app.js上，在laravel上，我导入了一个库，它使用Bootstra4
app.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //Bootstrap 4.3.1
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
const files = require.context('./', true, /\.vue
浏览 0提问于2019-05-27得票数 1
2回答
? 在我的media.txt文件中，我有： "https://www.dropbox.com/s/******/687.jpg?dl=0",
"https://www.dropbox.com/s/******/0688.jpg?dl=0 我有以下Vue carousel组件： <template>
<section>
<v-card
class="mx-auto"
color="#26c6da"
dark
max-width
浏览 75提问于2019-05-07得票数 2
回答已采纳
我们使用Selenium和Fitnesse进行UI测试，我们打开Firefox并执行所有与UI相关的操作--点击、填写字段、按下按钮等。
作为我们当前测试框架的一部分，FitnesseRoot定义了用于打开/销毁浏览器实例的SetUp/TearDown。所有的套件和测试(大约300个)都使用设置/拆卸作为UI测试的一部分。
我正在尝试用新的夹具替换我们的一个简单的测试来进行API测试，因为API测试比UI测试要快得多。测试本身运行良好，但这里的问题是，即使我的REST fixture不需要浏览器实例，SetUp也会打开它并尝试关闭它，但会返回一个异常(因为execution下的测试指向Tear
浏览 9提问于2017-02-15得票数 2
回答已采纳
1回答
我想调用父文件中的子组件方法，子组件是由render函数创建的。下面是我的代码
child.ts
export default {
setup(props) {
//...
const getCropper = () => {
return cropper
}
return () =>
// render function
h('div', { style: props.containerStyle }, [
])
}
parent.ts
<template>
浏览 47提问于2021-06-07得票数 2
回答已采纳
2回答
变量ES5到ES6的动态导出
、、、、
我正在从事一个vue/nuxt.js项目，并希望应用原子设计方法，我想以一种集群和更聪明的方式导入组件。
目前
import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'
我多么希望
import {
ButtonStyled,
Text
浏览 0提问于2019-05-03得票数 2
回答已采纳
1回答
我使用dynamic import来执行webpack来加载子目录中的文件：
const requireApplicationRoutes = require.context('./', true, /routes.js$/);
let routes: any = [];
requireApplicationRoutes.keys().forEach((fileName) => {
routes = routes.concat(requireApplicationRoutes(fileName).default);
});
如何在import模块中使用typesc
浏览 1提问于2018-10-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
