uniapp vue3 全局组件如何注册和使用

在uniapp的vue3项目中，如何正确注册和使用全局组件？我尝试通过app.component()注册组件后，在页面中使用时却提示组件未定义。具体应该如何配置？是否需要额外的步骤来确保全局组件在所有页面中可用？求完整的实现方法。

2 回复

在 main.js 中引入组件并使用 app.component 注册：

import MyComponent from '@/components/MyComponent.vue'
app.component('MyComponent', MyComponent)

页面中直接使用 <MyComponent /> 即可。


在 UniApp + Vue 3 中，全局组件的注册和使用步骤如下：

1. 创建全局组件

在 components 目录下创建组件文件，例如 MyButton.vue：

<template>
  <button class="my-btn" @click="handleClick">
    <slot></slot>
  </button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击')
}
</script>

<style scoped>
.my-btn {
  padding: 10px 20px;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

2. 注册全局组件

在 main.js 中注册：

import { createApp } from 'vue'
import App from './App.vue'

// 导入全局组件
import MyButton from '@/components/MyButton.vue'

const app = createApp(App)

// 注册全局组件
app.component('MyButton', MyButton)

app.mount('#app')

3. 使用全局组件

在任何页面或组件中直接使用：

<template>
  <view class="container">
    <MyButton>点击我</MyButton>
    <MyButton>全局按钮</MyButton>
  </view>
</template>

注意事项：

  1. 组件名推荐使用 PascalCase（大驼峰命名）
  2. 注册后无需在组件内再次引入
  3. 支持 props、slots、events 等所有 Vue 组件特性
  4. 适用于多个页面频繁使用的组件

优势：

  • 一次注册，全局可用
  • 减少重复导入代码
  • 统一维护组件逻辑

这种方式特别适合按钮、弹窗、导航栏等通用组件的管理。

回到顶部