uniapp vue3引入自定义组件
时间: 2025-01-06 09:33:49 浏览: 91
### 如何在 UniApp Vue3 项目中引入和使用自定义组件
#### 创建自定义组件
为了创建一个自定义组件,在 `src/components` 文件夹内新建名为 MyComponent.vue 的文件。此操作遵循标准的 Vue 组件结构,允许开发者利用单文件组件的优势[^1]。
```html
<template>
<div class="my-component">
<!-- 组件模板 -->
</div>
</template>
<script setup>
// 这里可以声明响应式数据、方法和其他选项
import { ref } from 'vue';
const message = ref('Hello from my component!');
</script>
<style scoped>
.my-component {
/* 样式 */
}
</style>
```
#### 注册并使用组件
当希望在一个页面或另一个组件中使用上述创建好的自定义组件时,需先导入再注册它。对于采用 `<script setup>` 语法糖的情况,可以直接在脚本标签内部完成这些工作[^2]。
```html
<!-- Page 或其他父级组件中的代码片段 -->
<template>
<div>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from '@/components/MyComponent.vue';
</script>
```
如果打算在整个应用范围内全局可用,则可以在项目的入口文件 main.js(main.ts) 中进行一次性注册:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
// 导入所有需要作为全局组件的部分
import MyComponent from '@/components/MyComponent.vue'
const app = createApp(App)
// 将其挂载到全局上下文中以便任何地方都能访问
app.component('MyComponent', MyComponent).mount('#app')
```
另外一种方式是在 `env.d.ts` 文件中做批量模块声明,从而简化路径引用过程[^5]:
```typescript
declare module '@/components/*' {
import type { ComponentOptions } from 'vue'
const component: ComponentOptions
export default component
}
```
这样设置之后就可以更方便快捷地按需加载各个局部使用的组件而无需每次都写完整的相对路径了。
阅读全文
相关推荐


















