vue3.0如何在全局挂载对象和方法
作者:gis_rc 时间:2024-05-13 09:07:59
如何在全局挂载对象和方法
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"));
? ? });
来源:https://blog.csdn.net/weixin_44265800/article/details/109121515
标签:vue3.0,全局挂载,对象,方法
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue-cli中使用高德地图的方法示例
2024-04-27 16:09:39
![](https://img.aspxhome.com/file/2023/3/132973_0s.png)
Javascript验证方法大全
2024-04-17 10:19:44
CSS3的新特性
2009-03-23 17:46:00
![](https://img.aspxhome.com/file/UploadPic/20093/23/01-13s.jpg)
bootstrapValidator.min.js表单验证插件
2024-04-10 13:53:46
微信小程序实现分页查询详解
2024-04-16 10:38:58
![](https://img.aspxhome.com/file/2023/0/136570_0s.png)
django中使用memcached示例详解
2023-02-10 07:30:50
Python3爬虫带上cookie的实例代码
2021-11-10 18:06:58
简单form标准化实例——整体布局
2007-05-11 17:04:00
![](https://img.aspxhome.com/file/uploadpic/20075/200751117421929.gif)
基于sqlserver的四种分页方式总结
2024-01-13 22:34:33
![](https://img.aspxhome.com/file/2023/7/88247_0s.png)
linux下讲解MySQL安装与登录方法
2024-01-14 21:30:01
ActiveMQ:使用Python访问ActiveMQ的方法
2022-04-19 01:48:30
![](https://img.aspxhome.com/file/2023/8/110038_0s.jpg)
6行Python代码实现进度条效果(Progress、tqdm、alive-progress和PySimpleGUI库)
2022-09-15 16:00:46
![](https://img.aspxhome.com/file/2023/9/103489_0s.png)
Python百度指数获取脚本下载并保存
2023-01-05 23:47:44
![](https://img.aspxhome.com/file/2023/8/67878_0s.webp)
Oracle 分析函数RANK(),ROW_NUMBER(),LAG()等的使用方法
2009-11-05 21:45:00
Ubuntu Server 20.04 LTS 环境下搭建vim 编辑器Python IDE的详细步骤
2023-06-02 05:13:18
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2021-08-24 03:06:43
javascript中的正则表达式使用详解
2024-04-08 10:52:55
asp如何准确地获得一个整数?
2010-07-07 12:25:00
由浅入深讲解python中的yield与generator
2022-08-14 06:26:11
python目标检测给图画框,bbox画到图上并保存案例
2023-03-07 07:47:52