vue实现getapp
Vue 中实现类似 getApp 的功能
在 Vue 中可以通过全局属性或依赖注入的方式实现类似小程序中 getApp() 的功能，获取全局应用实例。
通过全局属性
在 Vue 3 中可以通过 app.config.globalProperties 添加全局属性：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 添加全局属性
app.config.globalProperties.$app = app
app.mount('#app')在组件中使用：
export default {
mounted() {
const app = this.$app
// 使用 app 实例
}
}通过 Provide/Inject
Vue 提供了依赖注入机制，可以在根组件提供应用实例：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 提供应用实例
app.provide('app', app)
app.mount('#app')在子组件中注入：
export default {
inject: ['app'],
mounted() {
const app = this.app
// 使用 app 实例
}
}直接导出应用实例
也可以直接导出应用实例供其他模块使用：
// app.js
import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)
app.mount('#app')在其他文件中导入：
import { app } from './app'
// 使用 app 实例注意事项
- 全局属性方式简单但可能污染组件实例
- 依赖注入方式更符合 Vue 的设计理念
- 直接导出实例适用于模块化程度较高的项目
- 避免过度使用全局实例，优先考虑组件间通信方式
