有两种都是在main.js声明 第一种 main.js 声明 Vue.config.productionTip = false// mount axios Vue.$http and this.$httpVue.use(VueAxios) Vue.prototype.$a = 1 new Vue({ router,... 在组件中使用a console.log(this.$a) 这样定义有
有两种都是在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