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

目录
  • 如何在全局挂载对象和方法
    • 1.官方的说明
    • 2.更新后的挂载方法
    • 3.在全局使用
    • 4.但是应用中的this对象已经不再是一个Vue对象了
  • vue3全局挂载和使用

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

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"));
    });

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.extend实现挂载到实例上的方法

    本文实例讲述了Vue.extend实现挂载到实例上的方法.分享给大家供大家参考,具体如下: 这里主要是做个笔记 根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 官网的用法是: <div id="mount-point"></div> // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{

  • vue组件挂载到全局方法的示例代码

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢. 以bootstrap-vue中的Alert组件为例,分一下几步进行: 1.定义一个vue文件实现对原组件的再次封装 main.vue <template> &

  • 关于vue3编写挂载DOM的插件问题

    vue3 跟 vue2 相比,多了一个 app 的概念,vue3 项目的创建也变成了 // main.js import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' const app = createApp(App) app.use(ElementPlus) // 使用饿了么框架 app.mount('#app') 所以 Vue.extend 也没有了.

  • Vue使用JSEncrypt实现rsa加密及挂载方法

    挂载全局方法 使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 * https://www.jb51.net/article/179813.htm (原文处有一个地方不对,不需要转换+,rsa已经做过base64转码了) 1.安装依赖 npm install jsencrypt 2.在main.js引入 import { JSEncrypt } from 'jsencrypt' 3.挂载全局方法 //JSEncrypt加密方法 Vue.pro

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

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

    目录 如何在全局挂载对象和方法 1.官方的说明 2.更新后的挂载方法 3.在全局使用 4.但是应用中的this对象已经不再是一个Vue对象了 vue3全局挂载和使用 如何在全局挂载对象和方法 1.官方的说明 Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数. 2.更新后的挂载方法 这个是官网的说明 所以现在我们的办法就是这样 import { createApp } fr

  • vue3.0中sass全局的使用过程

    vue3.0中sass全局的使用过程

    目录 vue3.0 sass全局的使用 vue3.0使用sass入门 1.使用npm安装sass包 2.新建scss文件 3.在main.js中引入style.scss文件 4.在页面元素中引入样式即可 vue3.0 sass全局的使用 需要安装一个插件:sass-resources-loader npm i sass-resources-loader --save-dev 建一个scss文件common.scss $input-color: #888; 在vue.config.js配置(官网灰

  • 茶余饭后聊聊Vue3.0响应式数据那些事儿

    茶余饭后聊聊Vue3.0响应式数据那些事儿

    "别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了.既来之则安之,扶我起来我要开始讲了.Vue3.0 为了达到更快.更小.更易于维护.更贴近原生.对开发者更友好的目的,在很多方面进行了重构: 使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual

  • Vue3全局挂载使用Axios学习实战

    Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • Vue3.0 响应式系统源码逐行分析讲解

    前言 关于响应式原理想必大家都很清楚了,下面我将会根据响应式API来具体讲解Vue3.0中的实现原理, 另外我只会针对get,set进行深入分析,本文包含以下API实现,推荐大家顺序阅读 effect reactive readonly computed ref 对了,大家一定要先知道怎么用哦~ 引子 先来段代码,大家可以直接复制哦,注意引用的文件 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • 一文带你了解vue3.0响应式

    一文带你了解vue3.0响应式

    目录 使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联 副作用渲染函数的执行过滤 结尾 我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • Vue3.0数据响应式原理详解

    Vue3.0数据响应式原理详解

    基于Vue3.0发布在GitHub上的第一版源码(2019.10.05)整理 预备知识 ES6 Proxy,整个响应式系统的基础. 新的composition-API的基本使用,目前还没有中文文档,可以先通过这个仓库(composition-api-rfc)了解,里面也有对应的在线文档. 先把Vue3.0跑起来 先把vue-next仓库的代码clone下来,安装依赖然后构建一下,vue的package下的dist目录下找到构建的脚本,引入脚本即可. 下面一个简单计数器的DEMO: <!DOCTY

  • 你准备好迎接vue3.0了吗

    前言 本月21号晚上看了尤大大的直播,感觉vue3.0离我们越来越近了,预计年中正式发布,3.0的改变的确很大,性能提升了很多,很多东西也在靠向react.为了到时可以很快的转入vue3.0的阵营,从现在开始熟悉新的特性是很有必要的. 如果你想在v2.x中使用3.0的内容,可通过以下方式 npm install '@vue/composition-api' 在main.js中引入 import VueCompositionApi from '@vue/composition-api'; Vue.

  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! GitHub地址请访问:https://github.com/GitHubGanKai/vue3-jd-h5 项目介绍 vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页.分类页面.我的页面.购物车等. 本地线下代码vue2.6在分支demo中,使用mockjs

随机推荐