首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue3 如何加prototype。vue3使用globalProperties
3397
人阅读
2023/7/6 9:51
总访问:
884734
评论:
0
收藏:
0
手机
分类:
前端
在2.X版本中创建一个vue 实例是通过 new Vue()来实现的,到了3.X中则是通过使用createApp这个 API返回一个应用实例,并且可以通过链条的方式继续调用其他的方法。 在vue2.x中,我们想设置全局变量,可以在main文件中用prototype绑定vue实列,在vue3.0中,可以用app.config.globalProperties来代替prototype,具体用法如下。 ``` // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' const app = createApp(App) app.use(store) app.use(router) app.config.globalProperties.$axios = axios // 自定义添加 const vm = app.mount('#app') ``` 这样就可以使用了 ``` ... <script> export default { name: 'App', methods: {...}, mounted() { console.log(this.$axios) } } </script> ``` ### 绑定一个字符串 **在 vue2 中绑定** ``` Vue.prototype.$dzm = 'dj-test' ``` **在 vue3 中绑定** ``` // 初始化相关 import { createApp } from 'vue' import { nextTick } from "@vue/runtime-core" import App from './App.vue' import router from './router' import store from './store' // 创建对象 const app = createApp(App) // 必须使用 nextTick,不然会有加载顺序问题,导致绑定失败 nextTick(() => { // 代替 Vue.prototype.$xxx 绑定 app.config.globalProperties.$dzm = 'dj-test' }) // 使用并挂载 app.use(store).use(router).mount('#app') // 导出 export default app ``` js中使用 ``` <script> import { getCurrentInstance } from 'vue' export default { setup () { const { proxy } = getCurrentInstance() console.log(proxy.$dzm) } } </script> ``` 模版中使用 ``` <span>{{ $dzm }}</span> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}