有两种都是在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. PHP读取文件内容的五种方式

    -----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path ...

  2. [BZ1925] [SDOI2010]地精部落

    [BZ1925] [SDOI2010]地精部落 传送门 一道很有意思的DP题. 我们发现因为很难考虑每个排列中的数是否使用过,所以我们想到只维护相对关系. 当我们考虑新的一个位置时,给新的位置的数分配 ...

  3. 面试必问:HashMap 底层实现原理

    HashMap是在面试中经常会问的一点,很多时候我们仅仅只是知道HashMap他是允许键值对都是Null,并且是非线程安全的,如果在多线程的环境下使用,是很容易出现问题的. 这是我们通常在面试中会说的 ...

  4. Gamma阶段第十次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  5. [Gamma] 项目展示

    [Gamma] 项目展示 一.工程展示 1.项目简介 定位分析 我们的目标是做一个创意分享网站,在之前的阶段中完成了大框架的搭建,并以此为基础进行界面优化与功能扩展. 典型用户 用户 面临困境 需求功 ...

  6. 图论 --- 骑士周游问题,DFS

    A Knight's Journey   Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 28630   Accepted: ...

  7. Element 表单验证,不清空数据,仅仅取消表单字段校验

    重置表单 this.$refs['ageForm'].resetFields() // 表单重置 仅清空校验 this.$refs['ageForm'].clearValidate() // 清除验证

  8. Java学习:接口(interface)的使用于注意事项

    接口 接口就是一种公共的规范标准.只要符合规范标准,就可以大家通用. 接口就是多个类的公共规范.接口是一种引用数据类型,最重要的内容就是其中的:抽象方法. 如何定义一个接口的格式 如何定义一个接口的格 ...

  9. Marshmallow详解

    目录 Marshmallow详解 1. Scheme 2. Serializing(序列化) 3. 过滤输出 4. Deserializing(反序列化) 5. 处理多个对象的集合 6. Valida ...

  10. c# .netcore oracle连接工具类

    1.先右键->添加NeGet包->引入Oracle.ManagedDataAccess.dll 2.将该类加入项目中 工具类: using System; using System.Col ...