1. 前言
- 之前的文章 前端支付 里面截圖了部分代碼,因?yàn)榇a是
vue3寫(xiě)的,有些寫(xiě)法部分人還不熟悉,經(jīng)常咨詢(xún),這里簡(jiǎn)單說(shuō)下2個(gè)重點(diǎn)
2. vue3全局變量的 定義
- 這個(gè)全局變量主要值js邏輯的業(yè)務(wù)值,而不是頁(yè)面組件
-
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自帶這個(gè)配置
const prototype = app.config.globalProperties
// 原型上掛載就行
// 1. 掛載 業(yè)務(wù)組件
prototype.$toast = Toast
// 2. 掛載第三方依賴(lài)
prototype.$Base64 =Base64
// 3. 掛載請(qǐng)求
prototype.$axios = axios;
3. 頁(yè)面使用全局變量
-
getCurrentInstance 獲取全局變量
- 直接上代碼
import {getCurrentInstance} from "vue
const {proxy} = getCurrentInstance()
// 1. 業(yè)務(wù)組件的使用
proxy.$toast.success('支付成功')
// 2. 常用依賴(lài)的使用
proxy.$Base64.encode("666")
// 3. axios
proxy.$axios({
url:'',
method:'',
}）
proxy.$axios.get()
4. 全局組件的注冊(cè)
- 頁(yè)面顯示的組件 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)
}
- 頁(yè)面直接使用組件名就行了
5. main.js
-
展示
- 僅做參考
參考資料
ElementPlus icon
初心
我所有的文章都只是基于入門(mén)，初步的了解视译；是自己的知識(shí)體系梳理,如有錯(cuò)誤,道友們一起溝通交流;
如果能幫助到有緣人,非常的榮幸,一切為了部落的崛起;
共勉
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
