zoukankan      html  css  js  c++  java
  • 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.$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

  • 相关阅读:
    存储器类型区分
    语言基础(25):容器与算法
    X11-forwarding
    语言基础(24):句柄类
    Markdown(2):流程图
    剑指offer-树的子结构
    剑指offer-判断链表是否有环
    剑指offer-求链表的中间结点
    剑指offer-合并两个排序的链表
    剑指offer-反转链表
  • 原文地址:https://www.cnblogs.com/cxscode/p/11188143.html
Copyright © 2011-2022 走看看