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> / ...
随机推荐
- PHP读取文件内容的五种方式
-----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path ...
- [BZ1925] [SDOI2010]地精部落
[BZ1925] [SDOI2010]地精部落 传送门 一道很有意思的DP题. 我们发现因为很难考虑每个排列中的数是否使用过,所以我们想到只维护相对关系. 当我们考虑新的一个位置时,给新的位置的数分配 ...
- 面试必问:HashMap 底层实现原理
HashMap是在面试中经常会问的一点,很多时候我们仅仅只是知道HashMap他是允许键值对都是Null,并且是非线程安全的,如果在多线程的环境下使用,是很容易出现问题的. 这是我们通常在面试中会说的 ...
- Gamma阶段第十次scrum meeting
每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...
- [Gamma] 项目展示
[Gamma] 项目展示 一.工程展示 1.项目简介 定位分析 我们的目标是做一个创意分享网站,在之前的阶段中完成了大框架的搭建,并以此为基础进行界面优化与功能扩展. 典型用户 用户 面临困境 需求功 ...
- 图论 --- 骑士周游问题,DFS
A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28630 Accepted: ...
- Element 表单验证,不清空数据,仅仅取消表单字段校验
重置表单 this.$refs['ageForm'].resetFields() // 表单重置 仅清空校验 this.$refs['ageForm'].clearValidate() // 清除验证
- Java学习:接口(interface)的使用于注意事项
接口 接口就是一种公共的规范标准.只要符合规范标准,就可以大家通用. 接口就是多个类的公共规范.接口是一种引用数据类型,最重要的内容就是其中的:抽象方法. 如何定义一个接口的格式 如何定义一个接口的格 ...
- Marshmallow详解
目录 Marshmallow详解 1. Scheme 2. Serializing(序列化) 3. 过滤输出 4. Deserializing(反序列化) 5. 处理多个对象的集合 6. Valida ...
- c# .netcore oracle连接工具类
1.先右键->添加NeGet包->引入Oracle.ManagedDataAccess.dll 2.将该类加入项目中 工具类: using System; using System.Col ...