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"));
});
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
让 babel webpack vue 配置文件支持智能提示的方法
这篇文章主要介绍了让 babel webpack vue 配置文件支持智能提示的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
unplugin-auto-import的配置以及eslint报错解决详解
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具,这篇文章主要给大家介绍了关于unplugin-auto-import的配置以及eslint报错解决的相关资料,需要的朋友可以参考下2022-08-08
vue webpack build资源相对路径的问题及解决方法
这篇文章主要介绍了vue webpack build资源相对路径的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
vue.nextTick()与setTimeout的区别及说明
这篇文章主要介绍了vue.nextTick()与setTimeout的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩,这篇文章给大家详细介绍了vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍,感兴趣的朋友一起看看吧2018-09-09


最新评论