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) }
- 页面直接使用组件名就行了
5. main.js
- 展示
main.png- 仅做参考
