精华内容
下载资源
问答
  • vue 注册全局变量

    2020-05-27 23:32:03
    在main.js中使用Vue.prototype注册全局变量 // main.js // 以.vue文件引入自定义组件的所有methods为例 import Vue from 'vue' import App from './App' // step1: 引入.vue import myComponent from './components...
    1. 在.js文件或.vue文件中配置数据、函数
    2. 在main.js中使用Vue.prototype注册全局变量
    // main.js
    // 以.vue文件引入自定义组件的所有methods为例
    import Vue from 'vue'
    import App from './App'
    // step1: 引入.vue
    import myComponent from './components/my-component.vue';
    
    Vue.config.productionTip = false
    
    // step2: 注册为全局变量
    Vue.prototype.myComponentMethods = myComponent.methods;
    
    App.mpType = 'app'
    
    const app = new Vue({
    	...App
    })
    app.$mount()
    
    1. 需要注意的是,上述方法引入组件中的函数时,组件并没有被创建过,并不存在生命周期,所以created等生命周期里的代码并不会被执行。
    展开全文
  • 最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE全局变量,不如说是模块化JS开发的全局变量。 1、全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。 全局变量专用...
  • vue定义全局变量

    万次阅读 2018-11-02 15:01:00
    1、将从服务器请求的数据作为全局变量全局变量模块挂载到Vue.prototype) 在开发中,有时需要将从接口请求到的一些数据当做全局变量,在其他页面多次使用。比如,登录成功后可能需要将用户名,id等信息存起来,...

    1、将从服务器请求的数据作为全局变量(全局变量模块挂载到Vue.prototype)

    在开发中,有时需要将从接口请求到的一些数据当做全局变量,在其他页面多次使用。比如,登录成功后可能需要将用户名,id等信息存起来,便于其他页面展示或使用,将这些信息定义为全局变量是用起来就很方便。
    举栗子:
    在login.vue中拿到了用户的一些信息:

    <script>
        import Vue from 'vue'     //注意,要在这个页面中引入vue,不然下面的Vue.prototype会报错
        export default {
            data(){
                return{}
            },
            methods:{
                login(){
                    const userMsg = {
                        userId : 123,
                        userName : '张三',
                        userSite : '上海市浦东新区'
                    }
                    Vue.prototype.$userMsg = userMsg;    //将全局变量模块挂载到Vue.prototype中
                    this.$router.push({path:'/index2'});
                },
            }
        }
    </script>
    

    在另一个页面使用:

    alert(this.$userMsg.userSite);      //拿到在login.vue中的用户位置
    

    2、在全局的js中自定义全局变量

    命名global.js为全局js,自定义全局变量:

    const host = 'localhost:8080';
    const token = 'abcdefg123456';
    const city = '上海';
    
    export default{
        host,    //地址
        token,   //用户token信息
        city     //位置
    }
    

    在vue页面中使用:

    <template>
        <div>
            <button @click="clickMe">点我</button>
        </div>
    </template>
    <script>    
        import global_msg from '../js/global.js'    //注意文件路径,实际路径以项目目录结构为准
        export default {
            data(){
                return{}
            },
            methods:{
                clickMe(){
                    alert(global_msg.host);     //localhost:8080
                }
            }
        }
    </script>
    

    3、在main.js中将global.js挂载到Vue.prototype中

    将上面例子中的global.js在入口文件main.js中引入并挂载:

    import global_msg from './js/global.js'   //注意文件路径,实际路径以项目目录结构为准
    Vue.prototype.$global_msg = global_msg;
    

    在页面中使用:

    <template>
        <div>
            <button @click="clickMe">点我</button>
        </div>
    </template>
    <script>    
        export default {
            data(){
                return{}
            },
            methods:{
                clickMe(){
                    alert(this.$global_msg.host);    //localhost:8080
                }
            }
        }
    </script>
    
    展开全文
  • 主要介绍了vue定义全局变量和全局方法的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 实现vue监听全局变量

    千次阅读 2018-11-05 21:28:46
    实现vue监听全局变量 场景:在一个全局函数中需要根据不同的条件改变一个全局变量的值,并在另一个页面中展示这个全局变量。在监听一个事件时调用该全局函数,全局变量的值会随之更新,但是在另一个页面中始终显示的...

    实现vue监听全局变量

    场景:在一个全局函数中需要根据不同的条件改变一个全局变量的值,并在另一个页面中展示这个全局变量。在监听一个事件时调用该全局函数,全局变量的值会随之更新,但是在另一个页面中始终显示的是全局变量的初始值。如何使全局变量进行刷新。
    网上也没有找到可行的办法,要么说的很简洁,要么不可行。所以自己也试了很多方式,终于用vuex的Mutation实现了全局变量刷新。mutation用于修改state中定义的状态变量,可以同步更改state 的状态。
    vuex中将scale初始值设置为"1:100W"。mutations中的setScale方法用于在全局函数中改变scale的值。

    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const state = {
        scale: "1:100W"
    }
    const mutations = {
            setScale(state, scale) {
                state.scale = scale;
            }
        }
    
    export default new Vuex.Store({
        state,
        mutations
    });
    

    在全局函数中根据不同条件要改变scale的值

    import store from '../store'
    if (zoom <= 5 && sheetType != 1000000) {
    	sheetType = 1000000;
    	addSheetNumber(1000000);
    	store.commit('setScale', "1:100W");
     } else if (zoom <= 7 && zoom >= 6 && sheetType != 500000) {
    	sheetType = 500000;
    	addSheetNumber(500000);
    	store.commit('setScale', "1:50W");
    } else if (zoom <= 9 && zoom >= 8 && sheetType != 250000) {
    	sheetType = 250000;
    	addSheetNumber(250000);
    	store.commit('setScale', "1:25W");
    }
    

    在另一个页面中监听scale的值

    <div>图幅{{$store.state.scale}}</div>
    

    这样就实现了监听全局变量scale的方法。scale会随着全局函数事件的变化而变化。

    展开全文
  • 主要介绍了vue全局变量的定义和使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue监听全局变量

    万次阅读 2017-12-12 16:39:06
    Vue监听全局变量项目中,有两个页面需要用到实时的二维码(二维码信息5秒更新一次),所以计划吧这部分抽成全局Util来做,二维码信息在Util中定义为qrCodeMsg。 意思是:APage.vue页面想绑定Util.vue中的qrCodeMsg...

    Vue监听全局变量

    项目中,有两个页面需要用到实时的二维码(二维码信息5秒更新一次),所以计划吧这部分抽成全局Util来做,二维码信息在Util中定义为qrCodeMsg。
    意思是:APage.vue页面想绑定Util.vue中的qrCodeMsg属性,但qrCodeMsg改变的时候,APage.vue并没有跟着改变。
    APage.vue中使用:
    <div>{{this.Util.qrCodeMsg}}<div>
    网上也几乎搜不到有用的文章。
    最后在看了双向绑定原理的时候突然来了个灵感,把this.Util.qrCodeMsg改为this.Util.getQrCodeMsg(),这个方法是在Util中新定义的:

    getQrCodeMsg: function () {
        return qrCodeMsg
    }

    结果就可以了。亲测有效。

    还想到一种完成全局变量绑定的方式的思路是:

    那APage.vue中需要绑定的qrCodeMsg的变量定义在APage.vue,然后把这个变量传到定时任务中去,任务中也改变这个值。这种方法还没试验过。

    展开全文
  • VUe全局变量的实现 全局变量专用模块Global.vue是以一个特定模块来组织管理全局变量,需要引用的地方导入该模块即可。使用方法如下: 将全局变量模块挂载到Vue.prototype里,在程序入口的main.js里加下面代码: ...
  • vue 建立 全局变量 全局访问

    千次阅读 2021-01-25 15:11:27
    就是关于 vue全局变量这个概念 和实现方法的探讨 不少人想都没想, 直接用vuex啊。 对啊, 我也是这个样想的 直接用vuex不就啥事没有了。 vuex支持 定义 修改。 还会实时刷新, 用来记录状态 再好不过 但是其他...
  • vue配置全局变量

    千次阅读 2019-07-07 21:18:12
    //配置全局变量方法1 在main.js文件中添加如下语句: **Vue.prototype.$TENANTID = '1';** 在需要使用该变量的文件中使用下述语法对变量进行操作: this.$TENANTID = ‘2’; //修改变量的值 console.log(this.$...
  • 最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE全局变量,不如说是模块化JS开发的全局变量。 1、全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。 全局变量专用...
  • vue 定义全局变量

    2019-05-16 18:25:55
    2、在init.js中定义全局变量(可以自建js文件) export default { install(Vue) { Vue.prototype.$backdevurl = 'http://192.168.1.188:8043/'; Vue.prototype.$frontdevurl = 'http://192.168.1.188:9030/'; ...
  • vue 使用全局变量

    万次阅读 2017-09-18 22:47:50
    vue 使用全局变量 使用vue中的组件进行请求的时候免不了需要设置baseURL。但是这个baseURL最好不要写在某个全局的vue组件中。如果写到一个组件中的话,打包之后再修改会发现加密了。 好,下面介绍一种方式,把...
  • Vue 定义全局变量

    万次阅读 2019-06-18 13:43:00
    创建一个 Store.vue 文件并暴露出去, 用来保存全局变量 <script> const name = 'shenxianhui'; const age = 24; export default { name, age }; </script> 在 Test.vue 组件中...
  • vue 引入全局变量和全局函数

    千次阅读 2019-07-05 15:32:33
    关于vue引入全局变量和全局函数 1、全局变量 首先单独定义一个js文件,我一般放在asset文件中,注意结尾要用export写法 在入口文件main.js(如果是多页面,就是用到该全局变量的入口文件)引入全局配置 ...
  • vue设置全局变量

    2020-03-20 15:57:37
    全局变量引入 index.html页面引入
  • vue创建全局变量

    千次阅读 2018-04-23 13:38:47
    1,单独建立一个Global.vue文件 &lt;script&gt; var adminName = "管理员"; var userName = "刘国超"; export default { adminName, userName } &lt;/script&gt;2,在...
  • vue process全局变量

    千次阅读 2019-04-18 10:23:41
    process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 require()。 2、通俗解释: process(进程)其实就是存在...
  • vue定义全局变量和全局方法

    千次阅读 2018-12-20 15:40:00
    vue定义全局变量和全局方法 一、全局引入文件 1、先定义共用组件 common.vue &amp;lt;script type="text/javascript"&amp;gt; // 定义一些公共的属性和方法 const ...
  • vue创建全局变量和方法有很多种,不过在这我推荐使用先新建一个js文件,这个文件主要就是写一个对象,这个对象直接带属性和方法即可,然后在main.js引入,引入后再用Vue.prototype把引入的文件直接挂接到vue的原型上...
  • vue监听全局变量

    万次阅读 2019-01-17 22:18:48
    可能因为格式的问题,无法再组件里面直接监听全局变量,通过compute属性来更新 computed: { listenshowpage1() { return this.$store.state._achievements ; } }, watch:{ listenshowpage1:function(old,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,694
精华内容 17,077
关键字:

vue注册全局变量

vue 订阅