vue3全局挂载以及使用

最新推荐文章于 2024-09-19 09:36:40 发布

一只大菜鸟J

最新推荐文章于 2024-09-19 09:36:40 发布

阅读量524

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46029283/article/details/129725891

版权

文章介绍了如何在Vue应用中进行依赖注入，首先在main.ts中使用`provide`全局挂载依赖，如设置`$baseUrl`，然后在.vue组件内通过`inject`来读取并使用这些依赖，实现跨组件通信。

摘要由CSDN通过智能技术生成

线上线下环境均可正常使用，使用依赖注入（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>

结果：