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

声明:本站所有文章,如无特殊说明或,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。本站所有图片如无特殊说明均为AI生成。
真诚赞赏,手留余香
赞赏
MySQL,Node.js
Node.js MySQL2 如何编写事务
2022-06-15
JavaScript,Node.js,前端
JavaScript console 的用法
2022-06-23
Jone
在什么样的花园里面,挖呀挖呀挖
种什么样的种子,开什么样的花
随机推荐
macOS 生成 icns 图标
JavaScript 代码混淆加密工具 javascript-obfuscator
Node.js 使用 Jest 和 supertest 做接口测试
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
CSS 滚动条样式修改
Git 放弃本地修改,强制和之前的某次提交同步
如何调整 iconfont 图标的位置和基线
支持 Selector API 的 HTML 解析器 node-html-parser
SQL 注入的生命力
MySQL 数据库中货币单位如何存储

微信联系我

夜间模式切换
回到顶部