vue3.0如何在全局挂载对象和方法

 更新时间:2022年04月19日 10:48:28   作者:gis_rc  
这篇文章主要介绍了vue3.0如何在全局挂载对象和方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

如何在全局挂载对象和方法

1.官方的说明

Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数。

2.更新后的挂载方法

这个是官网的说明

所以现在我们的办法就是这样

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const vm = createApp()
let c=()=>{
    console.log(1)
};
vm.config.globalProperties.$http =c;
vm.use(store).use(router).use(c).mount('#app');

3.在全局使用

this.$http

4.但是应用中的this对象已经不再是一个Vue对象了

你不能使用Vue.use()或者Vue.extend()的方法,像有的插件,例如vue-layer,就不能在vue3.x中使用。

vue3全局挂载和使用

1.开发环境 vue3.0

2.电脑系统 windows10专业版

3.在使用vue开发的过程中,我们会有一些公用的属性和方法,我们一般为了方便使用会这个属性和方法挂载到全局,下面我来分享一下

4.vue2挂载方法

Vue.prototype.$http = http
//在对应的组件中使用
this.$http
//这种写法相信小火们很熟悉了,那么在vue3中怎么写呢?

4-1.vue3挂载并使用

// 全局挂载
const app = createApp(App)
app.config.globalProperties.$Methods = Methods;
//在对应的组件中使用
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
  reactive,
} from "vue";
//因为vue3是组合API,所以要引入对应的(getCurrentInstance)
// setup
//一个json数组去重
const { proxy }: any = getCurrentInstance();//关键代码
    const $Methods = proxy.$Methods;//关键代码
    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"));
    });

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • antd upload上传组件如何获取服务端返回数据

    antd upload上传组件如何获取服务端返回数据

    这篇文章主要介绍了antd upload上传组件如何获取服务端返回数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue实现批量下载文件

    vue实现批量下载文件

    这篇文章主要为大家详细介绍了vue实现批量下载文件的方法(不走后端接口的方法),文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • vue-cli扩展多模块打包的示例代码

    vue-cli扩展多模块打包的示例代码

    本篇文章主要介绍了vue-cli扩展多模块打包的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue keep-alive请求数据的方法示例

    vue keep-alive请求数据的方法示例

    本篇文章主要介绍了vue keep-alive请求数据的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue表单验证自定义验证规则详解

    vue表单验证自定义验证规则详解

    这篇文章主要为大家详细介绍了vue表单验证自定义验证规则,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 基于vue中keep-alive缓存问题的解决方法

    基于vue中keep-alive缓存问题的解决方法

    今天小编就为大家分享一篇基于vue中keep-alive缓存问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3组件间传值避坑方法指南

    Vue3组件间传值避坑方法指南

    这篇文章主要为大家介绍了Vue3组件间传值避坑方法指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Vue3.2 中新出的Expose用法一览

    Vue3.2 中新出的Expose用法一览

    这篇文章主要介绍了Vue3.2 中新出的 Expose 是做啥用的,新的expose方法是非常直观的,而且很容易在我们的组件中实现,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Vue组件模板及组件互相引用代码实例

    Vue组件模板及组件互相引用代码实例

    这篇文章主要介绍了Vue组件模板及组件互相引用代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • vue usePop弹窗控制器的实现

    vue usePop弹窗控制器的实现

    本文主要介绍了vue usePop弹窗控制器的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04

最新评论