vue3中的Vue.prototype.xxx = xxx

已于 2023-04-19 10:04:41 修改
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue3.0技术（持续更新中...） 文章标签： vue.js javascript 前端
于 2023-04-12 10:29:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44162077/article/details/130100955
Vue3.0弃用了Vue.prototype.xxx的方式挂载全局属性和方法，这一改变影响了从前使用Vue2.0的开发模式。文章探讨了这一改动的原因及在Vue3.0中如何实现类似的全局扩展。

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

vue3.0中废除了Vue.prototype.xxx = xxx这种写法
vue2.0如果想挂载一个全局方式或属性到实例上

import Vue from 'vue'

Vue.prototype.$msg = 'Hello Vue'


//其他组件使用this可直接访问
this.$msg

vue3.0

import {
   
    createAp
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue和Vue-Element-Admin（十四）：vue3.x与vue2区别分析
叶子叶来
11-16 441
从切实开发使用总分析vue3.x与vue2区别，包括组合api、router、生命周期、父子组件与watch使用等等；
如何在Vue3中使用Vue.prototype
weixin_45392204的博客
08-25 1万+
前端菜鸟最近在开发新的项目，准备用Vue3，遇到了一些问题，整理下 话不多说，直接上代码。 import{createApp}from"vue"; importAppfrom"./App.vue"; importrouterfrom"./router"; importstorefrom"./store"; importqsfrom"qs"; constapp=createApp(App); app.use(store); app.use(router...
vue3 中 vue.prototype 的变化
SanOrintea的博客
11-07 4746
1 如果是选项式API，官方文档中有app.config.globalProperties这个代替方案（https://cn.vuejs.org/api/application.html#app-config-globalproperties）。2 如果是组合式API，直接用provide/inject。
Vue3像Vue2一样在prototype（原型）上挂载数据
小怪獸丶的糖的专栏
11-12 2541
【代码】Vue3像Vue2一样在prototype（原型）上挂载数据。
在Vue 3中使用Vue.prototype或全局变量的方法
最新发布
qq_29715355的博客
04-23 1207
在Vue 2中，我们可以通过添加全局属性或方法，这样在组件中就可以直接使用this来访问这些全局内容，避免了在每个组件中重复导入。但在Vue 3中，不再适用，需要寻找新的方式来实现类似的全局变量使用。例如，我们想将Axios添加到全局，以便在组件中可以直接使用来发起请求，而无需每次都导入Axios。
vue-cli3.x Vue.prototype挂载
wangmj518的专栏
04-04 670
使用vue-cli3.x 创建项目 之前vue-cli2创建项目后，如果自定义js插件，可以通过 import xxx from 'xxx' Vue.prototype.$xxx = xxx 将xxx挂载到Vue原型上，但到了cli3中，根据网上资料，现在 import Vue from 'vue' 并不能返回Vue对象，如果还是使用 Vue.prototype.$xxx = xxx挂载，那在子组件中也无法通过this.$xxx进行调用 cli3中现在是通过createApp创建Vue实例对.
vue项目分析--vue里的$&Promise.resolve（）&install(Vue)&vue自定义指令&Vue.directive()&Vue.prototype
weixin_46045444的博客
10-15 1042
文章目录vue里的$Promise.resolve（）install(Vue)vue自定义指令Vue.directive()的用法和实例Vue.prototype 最后从已有项目的url router分析每一个页面 #/dashboard是首页 所以组件在@/views/dashboard/index.vue 可以看到首页下面还有民主测评/dashboard/democratic-evaluation和问卷调查’/dashboard/questionnaire-investigation’两个页面，分别
Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？
热门推荐
全端菜鸟小姐
12-26 2万+
data中定义了一个数据msg, vue实例上访问这个数据有两种方式，this.$data.msg 和 this.msg，请问，为vue如何实现this.msg能直接访问到data中的msg变量？？？data又为什么是个函数？ 分析： clone 下 vue 的项目源码，然后打开src/core/instance/index.js 调用 init 方法时先进行了检查，确保已经使用 n...
Vue 组件间的通信方式
X-77
01-05 579
Vue-组件间的通信 props、自定义事件、全局事件总线、消息的订阅与发布、插槽
Vue3中Vue.prototype.$project = base.getProjectName()的语法如何使用？
初学者
03-12 540
在 Vue 3 中，Vue.prototype 已被移除，不能再直接向 Vue 的原型上添加全局属性或方法。取而代之的方式是使用 app.config.globalProperties 进行全局属性的挂载。
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
weixin_44867717的博客
07-03 8842
vue知识
Vue3如何像在prototype（原型）上挂载数据
qq_68155756的博客
08-08 4960
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据， 2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据， 如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法： 这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
Vue3 globalProperties 的使用（代替 Vue.prototype.$xxx）
卡尔特斯
07-28 4312
代码】Vue3globalProperties的使用（代替Vue.prototype.$xxx）
vue3变化：prototype以及$on废弃的解决办法
qq_39179734的博客
10-13 8277
最近在教程里学习vue，实操中有一个功能需要在main里使用prototype定义全局属性，然后在子组件中发送到另外的组件遇到了问题。 vue3 中 prototype已经不在使用 换乘了config.globalProperties 而教程中vue2.是这样的 Vue.prototype.$bus = new Vue() 都知道vue3没有Vue了而是 {createApp} 并且 $on $off $once都已经废弃。这里有一个替换方法是使用mitt 使用方法： //首先初始化...
vue3怎么使用Vue.prototype.$loading来实现定义全局的变量和函数
肖肖肖丽珠的博客
09-24 521
vue2中我们可以在main.js里面通过Vue.prototype.$loading="ddddd"来定义全局变量。其他页面直接使用this.$loading就可以获取值。vue3里面没有this但是可以通过proxy访问他的this。vue3中也想实在这个功能怎么办？
vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）
博哥的二进制世界
07-17 7469
vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype） 上一章我们讲过vue2.x利用Vue.prototype注册全局组件/方法，然而vue3.x是无法通过Vue.prototype来注册全局组件/方法的，因此需要另辟蹊径。 vue3.x注册全局组件/方法主要有以下两个方式： provide / inject （推荐） main.js中：通过provide将组件或者方法、变量挂载在全局 import { createApp } from 'vue'; import App
Vue.prototype 全局变量
仗剑天涯，从摘要开始
02-03 1198
有两种都是在main.js声明 第一种 main.js 声明 1 2 3 4 5 6 7 8 9 10 Vue.config.productionTip =false // mount axios Vue.$http and this.$http Vue.use...
【Vue组件详解（三）】
小田是个程序员的博客欢迎你的到来呀~
04-09 2456
本篇文章重点解读VueComponent原型对象和Vue的关系，以及组件实例对象和vm的关系。干货满满，结合原理图展开，欢迎各位小伙伴阅读！！
【Vue】一一一一prototype详解
XiaoCoder的博客
02-23 515
Vue.prototype详解地址
vue-cli 添加global.less
09-02
为了在vue-cli项目中添加global.less全局样式文件，我们可以按照以下步骤操作： 1. 在项目根目录下创建一个名为styles的文件夹，用于存放全局样式文件。 2. 在styles文件夹中创建一个名为global.less的文件，用于编写全局样式。 3. 打开global.less文件，并添加你想要的全局样式代码。比如，设置基本的字体、颜色、背景等等。 4. 在main.js（或者你的入口文件）中引入global.less文件。可以使用import语句将global.less导入到main.js中。 5. 在main.js中找到Vue实例的创建，可以在其中注入全局样式。可以使用Vue.use()方法或者Vue.prototype.$XXX = xxx的方式全局引入less文件。 6. 现在，你可以在项目的任何组件中直接使用global.less中定义的样式了，并且这些样式将作用于所有组件。 通过以上步骤，我们成功地在vue-cli项目中添加了global.less全局样式文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值