Vue.prototype 全局变量
有两种都是在main.js声明
第一种
main.js 声明
Vue.config.productionTip = false // mount axios Vue.$http and this.$http
Vue.use(VueAxios) Vue.prototype.$a = 1 new Vue({
router,
...
在组件中使用a
console.log(this.$a)
这样定义有一个问题,很容易和组件定义的值冲突,所有一般我习惯在值前面加$
这个值不是全局变量,而是原型,不支持修改
Vue.prototype
不是全局变量,而是原型属性,去看看prototype
和原型链的知识就明白了。
参考《JavaScript高级程序设计》第6章 面向对象的程序设计
因为每一次跳转到新的Vue页面,都是一个独立的Vue实例,实例中this.$a
从Vue.prototype.$a
而来,所以仍然是1
第二种
有一种是在new Vue的时候声明,支持修改
new Vue({
...
data() {
return {
...,
a: 1
...
};
},
...
});
其他所有组件中通过$root.a
可访问和修改此变量。
第三种
把全局变量挂在Window下面,在main.js中:
window.a = 1;
组件A
console.log(a)//1
a = 2;
组件B
console.log(a)//2
这种不到万不得已的情况尽量不要用,会对全局造成污染,出现问题也不好定位
参考:https://segmentfault.com/q/1010000009992656
https://blog.csdn.net/pma934/article/details/86765722
Vue.prototype 全局变量的更多相关文章
- 使用Vue.prototype在vue中注册和使用全局变量
在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...
- vue定义全局变量和全局方法
一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const ...
- vue设置全局变量和修改
1. 只读的全局变量 对于只读的全局变量,知道的有以下两种使用方式: 1)global.js 模块中定义:其他模块import后再使用即可 1.1)定义 import Vue from 'vue'; ...
- Vue.prototype详解
参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...
- VUE中全局变量的定义和使用
目录 VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) 1.2 传递字段 2.解决方法 2.1 VUEX 2.2 使用全局变量法管理状态与字段值 3.具体实现 3.1创建 ...
- Vue.prototype的用法
基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...
- Vue 定义全局变量
main.js 中定义 import Ws from './lib/ws' import ElementUI from 'element-ui'; import GlobalFunc from './ ...
- vue.prototype和vue.use的区别和注意点
1.vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios; 2.vue.use:引入插件,例如vuex,vue.use(vuex)如图,vue. ...
- VUE.js全局变量的定义
模块化之后,想用js全局变量,遇到点困难.搜索资料后搞定,大概2个步骤: 1.定义一个vue模块,const定义变量,并用export对外暴露. Globle.vue <script> / ...
随机推荐
- 10-排序6 Sort with Swap(0, i) (25 分)
Given any permutation of the numbers {0, 1, 2,..., N−1}, it is easy to sort them in increasing order ...
- Flask 中的 request 之 先知道有这么个东西
每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...
- bat修改文件内容
#file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...
- elasticsearch 分片的创建 集群重启分片运作
2016年11月12日ENGINEERING Every shard deserves a home 作者 Joshua Backing Share Here are some great slide ...
- Qt应用开发常见问题
Qt判断当前操作系统? 可使用宏判断,例如: #ifdef Q_OS_MAC //mac ... #endif #ifdef Q_OS_LINUX //linux ... #endif #ifdef ...
- Maven 教程(15)— 实现多个项目关联自动化构建(maven-invoker-plugin插件的使用)
原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79726664 一.场景设想一个团队正在开发一个项目 bus-core-api,并 ...
- linux nc 命令详解
linux nc命令使用详解 功能说明:功能强大的网络工具语 法:nc [-hlnruz][-g<网关...>][-G<指向器数目>][-i<延迟秒数>][-o&l ...
- HashTable源码
1. 为什么无法创建更大的数组? Attempts to allocate larger arrays may result in OutOfMemoryError 如果数组长度过大,可能出现的两种错 ...
- 源码casino-server剖析(1)--游戏服务的整体架构和实现
前言: 最近研究了一些游戏服务器的架构和实现, github上找了几个开源的实现. 有几个感觉不错, 打算仔细研读一下. 游戏服务器种类繁多, 这边主要是基于状态同步的棋牌类游戏, 适合入门, ^_^ ...
- 拦截器配置类使用继承写法导致jackson的全局配置失效
问题描述 项目中需要一个拦截器用于拦截请求,在没有请求中生成requestId.然后写了一个配置类,这个类继承了 WebMvcConfigurationSupport类,重写了addIntercept ...