vue3 挂载全局对象，如何在组件内使用？

最新推荐文章于 2025-07-05 23:03:12 发布

茜红柿没错xx

最新推荐文章于 2025-07-05 23:03:12 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_61260987/article/details/126658965

vue3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue2和Vue3中如何全局挂载方法，包括Vue2的原型扩展和Vue3的组合式API使用。在Vue2中，通过Vue.prototype.$http挂载自定义方法；而在Vue3中，通过createApp配置globalProperties来挂载$Methods、$CONFIG和$TOOL，并在组件内部利用getCurrentInstance获取并使用这些全局对象。示例中展示了时间格式化和数组去重的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：vue2挂载方法：

Vue.prototype.$http = http
//在对应的组件中使用
this.$http

2：vue3挂载方法：

// 全局挂载
const app = createApp(App)
app.config.globalProperties.$Methods = Methods;
//挂载全局对象
app.config.globalProperties.$CONFIG = config;
app.config.globalProperties.$TOOL = tool;

//在组件内使用
import { ref, reactive, onMounted,getCurrentInstance } from "vue";

//vue3是组合式API，所以要引入 getCurrentInstance

const { proxy } = getCurrentInstance();
const $TOOL = proxy.$TOOL;
const $Methods = proxy.$Methods;


//时间格式化
inputValue.value = $TOOL.dateFormat(inputValue.value, 'yyyy-MM-dd hh:mm:ss')
//数组去重
 const jsonarrreduce = reactive([
      { id: "1", name: "李白" },
      { id: "2", name: "杜甫" },
      { id: "3", name: "白居易" },
      { id: "4", name: "项羽" },
      { id: "5", name: "小米" },
      { id: "1", name: "红米" },
      { id: "1", name: "诺基亚" },
      { id: "2", name: "真我" },
    ]);
    onMounted(() => {
      console.log($Methods.JsonArrReduce(jsonarrreduce, "id"));
    });