uniapp使用全局组件，

在 Uniapp 中，如果你的组件是应用层组件（例如全局悬浮按钮、全局通知栏等），并且希望它自动出现在所有页面而无需在每个页面模板中手动添加组件标签，可以通过以下两种方案实现：

方案一：通过 `app.vue` 挂载全局组件（推荐）

核心思路：将组件直接写入 app.vue 的模板中，使其作为应用的根组件的一部分，覆盖所有页面。

步骤

在 app.vue 中引入组件：

<!-- app.vue -->
<template><!-- 包裹所有页面 --><view><!-- 全局组件（通过 CSS 固定定位覆盖在所有页面上） --><global-component /><!-- 页面内容 --><page-container /></view>
</template><script>
import GlobalComponent from '@/components/GlobalComponent.vue'export default {components: {GlobalComponent}
}
</script><style>
/* 通过固定定位让组件全局可见 */
global-component {position: fixed;z-index: 9999;bottom: 20px;right: 20px;
}
</style>

组件特性：
- 组件会持续存在于所有页面（即使切换页面也不会销毁）
- 适合全局 UI 组件（如悬浮菜单、音乐播放器控件）

方案二：通过 `main.js` 全局注册 + 动态挂载

核心思路：将组件注册为全局组件，并通过 Vue 动态挂载到根节点，实现自动渲染。

步骤

在 main.js 中全局注册并挂载：


import Vue from 'vue'
import App from './App'
import GlobalComponent from '@/components/GlobalComponent.vue'// 全局注册组件
Vue.component('global-component', GlobalComponent)// 创建根实例
const app = new Vue({...App
})// 动态挂载到根节点（确保组件在 DOM 中）
const GlobalComponentInstance = new Vue({render: h => h(GlobalComponent)
}).$mount()document.body.appendChild(GlobalComponentInstance.$el)// 挂载到 Vue.prototype，方便在任何组件内访问
Vue.prototype.$globalComponent = GlobalComponentInstance.$children[0];app.$mount()

组件代码：

<template><view><view class="GlobalBlock" @click="showShareBoom=false" v-if="showShareBoom"><view class="GlobalBg"></view><img class="share_tips" :src="share_tips" alt="" srcset="" /></view></view>
</template><script>export default {props: {},data() {return {share_tips: this.$ossPath + 'share_tips.png',showShareBoom: false,}},mounted() {},methods: {close() {this.$emit('cancel')}}}
</script><style lang="scss" scoped>.share_tips {position: fixed;right: 30rpx;top: 30rpx;width: 460rpx;z-index: 999999;}.GlobalBlock {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999998;.GlobalBg {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .1);}}
</style>

在页面修改组件的data值：

// 显示this.$globalComponent.showShareBoom = true;// 隐藏// this.$globalComponent.showShareBoom = false;

组件特性：
- 组件独立于页面结构，直接插入到 DOM 根节点
- 需通过 CSS 控制位置（如 position: fixed）

方案对比

方案	适用场景	优点	缺点
`app.vue` 挂载	需要与页面交互的全局组件	✅ 组件生命周期与 App 同步 ✅ 可通过 Props 传递全局数据	❌ 需手动控制样式定位
动态挂载	完全独立于页面的全局组件	✅ 无需修改页面结构 ✅ 适合插件式组件	❌ 需要手动管理 DOM 节点