方法一：挂载在原型链上

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Axios from 'axios';

const golBalTest = () =>{
  console.log('测试全局挂载');
  return '测试全局挂载';
}

const app = createApp(App) 

// 挂载到vue原型上(方法1)
app.config.globalProperties.$axios = Axios;
app.config.globalProperties.$golBalTest = golBalTest;
app.config.globalProperties.$Test = "我在全局";

方法二：使用 app.provide()

使用这个 API，提供一个值，可以在应用中的所有后代组件中注入使用。

类型：

interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

第一个参数应当是注入的 key，第二个参数则是提供的值。返回应用实例本身。

import { createApp } from 'vue'
const app = createApp(/* ... */)
app.provide('message', 'hello')

在应用的某个组件中：

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'hello'
  }
}

参考：

https://cn.vuejs.org/api/application.html

修改时间 2024-03-05