vue实现getapp

Vue 中实现全局获取应用实例的方法

在 Vue 3 中，可以通过 getCurrentInstance 方法获取当前组件实例，但需要注意该方法仅在 setup 函数或生命周期钩子中可用。

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    console.log(instance.appContext.config.globalProperties)
  }
}

全局挂载应用实例

为了在 Vue 应用的任何地方都能访问到应用实例，可以在创建应用时将其挂载到全局对象上：

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

const app = createApp(App)
app.mount('#app')

// 挂载到全局对象
window.vueApp = app

通过 Provide/Inject 共享应用实例

在 Vue 中可以使用 provide/inject API 来共享应用实例：

// 在根组件中
import { provide } from 'vue'

export default {
  setup() {
    const app = getCurrentInstance().appContext.app
    provide('vueApp', app)
  }
}

// 在子组件中
import { inject } from 'vue'

export default {
  setup() {
    const app = inject('vueApp')
  }
}

使用插件方式扩展全局属性

可以通过插件方式将常用方法或属性添加到全局：

// 创建插件
const GlobalAppPlugin = {
  install(app) {
    app.config.globalProperties.$app = app
  }
}

// 使用插件
const app = createApp(App)
app.use(GlobalAppPlugin)

注意事项

使用全局应用实例时应当谨慎，避免过度依赖全局状态。在组件中优先考虑使用 props 和 emits 进行数据传递。

在 Vue 2 中可以通过 this.$root 访问根实例，但 Vue 3 中不再推荐这种方式。