vue3全局组件-全局变量-base64-axios-封装

2023-11-02 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue3全局组件-全局变量-base64-axios-封装

1. 前言

之前的文章前端支付里面截图了部分代码,因为代码是vue3写的,有些写法部分人还不熟悉,经常咨询,这里简单说下2个重点

2. vue3全局变量的定义

这个全局变量主要值js逻辑的业务值,而不是页面组件

globalProperties定义全局变量

main.js直接上代码

import { createApp } from 'vue'
import App from './App.vue'
import {Toast} from "vant"
 import axios from './api/http'
import { Base64 } from 'js-base64';
const app = createApp(App)
// vue3自带这个配置
const prototype = app.config.globalProperties
// 原型上挂载就行
// 1. 挂载 业务组件
prototype.$toast = Toast
// 2. 挂载第三方依赖
prototype.$Base64 =Base64
// 3. 挂载请求
prototype.$axios = axios;

3. 页面使用全局变量

getCurrentInstance 获取全局变量

直接上代码

import {getCurrentInstance} from "vue
const {proxy} = getCurrentInstance()
// 1. 业务组件的使用
proxy.$toast.success('支付成功')
// 2.  常用依赖的使用
proxy.$Base64.encode("666")
// 3. axios
 proxy.$axios({
  url:'',
 method:'',
 }）
 proxy.$axios.get()

4. 全局组件的注册

页面显示的组件 main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// app.component(组件名,组件)
//  比如ElementPlus icon的使用
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}