uniapp vue3微信小程序如何挂载全局组件

在uniapp中使用vue3开发微信小程序时，如何正确挂载全局组件？按照官方文档尝试在main.js中使用app.component()注册，但在页面中无法识别组件。是否需要特殊配置或引入方式？求具体实现代码和注意事项。

2 回复

在uniapp Vue3中挂载全局组件：

  1. 在main.js中：
import { createSSRApp } from 'vue'
import MyComponent from './components/MyComponent.vue'

const app = createSSRApp(App)
app.component('my-component', MyComponent)
app.mount('#app')
  1. 在页面中直接使用：
<template>
  <my-component />
</template>

注意：uniapp Vue3需要使用createSSRApp创建应用实例。


在 UniApp 中使用 Vue 3 挂载全局组件，可以通过 app.component() 方法实现。以下是具体步骤：

  1. 创建全局组件：在 components 目录下创建组件文件，例如 GlobalButton.vue。
  2. 注册全局组件：在 main.js 或 main.ts 中导入组件并使用 app.component() 注册。

示例代码：

components/GlobalButton.vue：

<template>
  <button class="global-btn">{{ text }}</button>
</template>

<script setup>
defineProps({
  text: String
})
</script>

<style scoped>
.global-btn {
  background-color: #007aff;
  color: white;
  padding: 10px;
}
</style>

main.js：

import { createApp } from 'vue'
import App from './App.vue'
import GlobalButton from '@/components/GlobalButton.vue'

const app = createApp(App)
app.component('GlobalButton', GlobalButton) // 注册为全局组件
app.mount('#app')
  1. 使用全局组件：在任何页面或组件中直接使用，无需单独导入：
<template>
  <view>
    <GlobalButton text="点击我" />
  </view>
</template>

注意事项：

  • 确保组件路径正确，使用 @ 别名指向项目根目录。
  • 全局组件名称建议使用 PascalCase（例如 GlobalButton）。
  • 在微信小程序中，全局组件在所有页面均可使用，但需遵循小程序组件规范。

通过以上步骤，即可在 UniApp Vue3 项目中成功挂载并使用全局组件。

回到顶部