Vue3 挂载全局方法

方法一:挂载在原型链上

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

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
765 文章
4 教程
8 项目
随机推荐
JavaScript 数组
WordPress 密码生成和密码验证
Node.js process 模块
Node.js 模块概念
JavaScript history对象
WordPress 数据库表结构
WordPress 文章排序
Node.js http 模块