vue3 mengkonfigurasi parameter global dan cara menggunakan komponen

kaedah vue2

1. Lekapan global

Vue.property.xxx

import Vue from "vue";
import axios from "axios";
Vue.prototype.$http= axios;
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

2. 🎜>1. Global mount

app.config.globalProperties.xxx

this.$http.xxx();

2 penggunaan komponen

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus, { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.config.globalProperties.$messageBox = ElMessageBox;
app.config.globalProperties.$message1 = ElMessage;

Anda sudah boleh melihat. $messageBox dan $message1 yang dipasang dalam appContext.config.globalProperties Mengenai mengapa terdapat satu lagi $message

, kita boleh melihat tangkapan skrin elemen ditambah tapak web rasmi

Anda dapat melihat bahawa ini dipasang secara lalai untuk elemen tambah, dan kami boleh menggunakannya secara langsung. Menambah $message1 di sini hanyalah untuk demonstrasi, anda boleh terus menggunakan pelekap lalai.

Contoh penggunaan lengkap

// 引入vue的 getCurrentInstance 方法
import { defineComponent, getCurrentInstance } from "vue";
// 获取当前组件实例
const { appContext } = getCurrentInstance();
// 打印看一下结构
console.log(appContext)

Atas ialah kandungan terperinci vue3 mengkonfigurasi parameter global dan cara menggunakan komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!