vue3全局挂载以及使用

线上线下环境均可正常使用, 使用依赖注入(provide在main.ts中注入依赖/inject在.vue文件中使用)

第一步、使用provide()在main.ts注入依赖

例:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
// 全局挂载
app.provide('$baseUrl','http://127.0.0.1:8000/api');
app.mount('#app')

第二步、使用inject()在.vue文件中读取依赖

例:

<template>
  <p>VUE</p>
  <p>{
   
   { $baseUrl }}</p>
</template>

<script setup lang="ts">
import { inject } from 'vue';

const $baseUrl:string | undefined = inject('$baseUrl');
</script>

<style lang="scss" scoped>
</style>

结果:

猜你喜欢

转载自blog.csdn.net/weixin_46029283/article/details/129725891