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

真诚赞赏,手留余香
赞赏
MySQL,Node.js
Node.js MySQL2 如何编写事务
2022-06-15
JavaScript,Node.js,前端
JavaScript console 的用法
2022-06-23
ngtwewy
随机推荐
WordPress 获取当前主题文件夹的路径
WordPress 按自定义排序的两种方法
使用 MySQL 线程池对压力测试的影响
curl 的用法指南
Rollup 教程
Node.js 的 URL 的模块
Node.js MySQL2 如何编写事务
MySQL的外键总结
Vue3 挂载全局方法
FFmpeg 修改默认音轨

微信联系我

夜间模式切换
回到顶部