有两种都是在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.$aVue.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 全局变量的更多相关文章

  1. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

  2. vue定义全局变量和全局方法

    一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const ...

  3. vue设置全局变量和修改

    1. 只读的全局变量 对于只读的全局变量,知道的有以下两种使用方式: 1)global.js 模块中定义:其他模块import后再使用即可 1.1)定义 import Vue from 'vue'; ...

  4. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  5. VUE中全局变量的定义和使用

    目录 VUE中全局变量的定义和使用 1.工作中遇到的两类问题 1.1 状态值(标志) 1.2 传递字段 2.解决方法 2.1 VUEX 2.2 使用全局变量法管理状态与字段值 3.具体实现 3.1创建 ...

  6. Vue.prototype的用法

    基础事例: 在vue项目main.js文件中: Vue.prototype.$appName = 'My App' 这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用. new Vue({ ...

  7. Vue 定义全局变量

    main.js 中定义 import Ws from './lib/ws' import ElementUI from 'element-ui'; import GlobalFunc from './ ...

  8. vue.prototype和vue.use的区别和注意点

    1.vue.prototype:实例上挂载属性/方法,例如Vue.prototype.axios = axios; 2.vue.use:引入插件,例如vuex,vue.use(vuex)如图,vue. ...

  9. VUE.js全局变量的定义

    模块化之后,想用js全局变量,遇到点困难.搜索资料后搞定,大概2个步骤: 1.定义一个vue模块,const定义变量,并用export对外暴露. Globle.vue <script> / ...

随机推荐

  1. 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 ...

  2. Flask 中的 request 之 先知道有这么个东西

    每个框架中都有处理请求的机制(request),但是每个框架的处理方式和机制是不同的 为了了解Flask的request中都有什么东西,首先我们要写一个前后端的交互 基于HTML + Flask 写一 ...

  3. bat修改文件内容

    #file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...

  4. elasticsearch 分片的创建 集群重启分片运作

    2016年11月12日ENGINEERING Every shard deserves a home 作者 Joshua Backing Share Here are some great slide ...

  5. Qt应用开发常见问题

    Qt判断当前操作系统? 可使用宏判断,例如: #ifdef Q_OS_MAC //mac ... #endif #ifdef Q_OS_LINUX //linux ... #endif #ifdef ...

  6. Maven 教程(15)— 实现多个项目关联自动化构建(maven-invoker-plugin插件的使用)

    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79726664 一.场景设想一个团队正在开发一个项目 bus-core-api,并 ...

  7. linux nc 命令详解

    linux nc命令使用详解 功能说明:功能强大的网络工具语 法:nc [-hlnruz][-g<网关...>][-G<指向器数目>][-i<延迟秒数>][-o&l ...

  8. HashTable源码

    1. 为什么无法创建更大的数组? Attempts to allocate larger arrays may result in OutOfMemoryError 如果数组长度过大,可能出现的两种错 ...

  9. 源码casino-server剖析(1)--游戏服务的整体架构和实现

    前言: 最近研究了一些游戏服务器的架构和实现, github上找了几个开源的实现. 有几个感觉不错, 打算仔细研读一下. 游戏服务器种类繁多, 这边主要是基于状态同步的棋牌类游戏, 适合入门, ^_^ ...

  10. 拦截器配置类使用继承写法导致jackson的全局配置失效

    问题描述 项目中需要一个拦截器用于拦截请求,在没有请求中生成requestId.然后写了一个配置类,这个类继承了 WebMvcConfigurationSupport类,重写了addIntercept ...