Vue3---Vue3中如何进行全局挂载

  • main.js中通过 config.globalProperties 进行全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

// Vue3 全局挂载系统名称
app.config.globalProperties.$systemName = '用户管理系统'
  •  组件实例中通过 getCurrentInstance 获取ctx上下文,再获取全局挂载的实例
<template>
  <div>
    <p>{
   
   { sysName }}</p>
  </div>
</template>
<script>
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  name: '',
  setup(){
    const { ctx } = getCurrentInstance()
    const sysName = ctx.$systemName
    return {
     sysName
    }
  }
})
</script>

猜你喜欢

转载自blog.csdn.net/qq_39115469/article/details/113795097