Home > Web Front-end > Vue.js > body text

How to declare global variables in vue.js

coldplay.xixi
Release: 2020-11-30 17:16:55
Original
4084 people have browsed it

The method of declaring global variables in vue.js: first set up a dedicated global variable module file, and define some initial states of variables in the module; then use export default to expose them; finally use [main.js] in [main.js] Vue.prototype] is mounted on the vue instance and the module is introduced.

How to declare global variables in vue.js

The operating environment of this tutorial: windows7 system, vue2.9 version, this method is suitable for all brands of computers.

Vue.js method of declaring global variables:

Define global variables

Principle: Set a dedicated global variable module file in the module Define the initial state of some variables, expose them using export default, and use Vue.prototype in main.js to mount them on the vue instance or when you need to use them elsewhere, just introduce this module.

Global variable module file:

Global.vue file

<script>
const serverSrc=&#39;www.baidu.com&#39;;
const token=&#39;12345678&#39;;
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>
Copy after login

Method 1: Reference the global variable module file where needed, and then obtain it through the variable name in the file Global variable parameter value.

    <template>
        <div>{{ token }}</div>
    </template>
     
    <script>
    import global_ from &#39;../../components/Global&#39;//引用模块进来
    export default {
     name: &#39;text&#39;,
    data () {
        return {
             token:global_.token,//将全局变量赋值到data里面,也可以直接使用global_.token
            }
        }
    }
    </script>
    <style scoped>
    </style>
Copy after login

Method 2: In the main.js file at the program entrance, mount the above Global.vue file to Vue.prototype.

    import global_ from &#39;./components/Global&#39;//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面
Copy after login

Then there is no need to reference the Global.vue module file in the entire project. You can directly access the global variables defined in the Global file through this.

text2.vue:

<template>
    <div>{{ token }}</div>
</template>
<script>
    export default {
        name: &#39;text&#39;,
        data () {
            return {
                 token:this.GLOBAL.token,//直接通过this访问全局变量。
                }
            }
    }
</script>
<style scoped>
</style>
Copy after login

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to declare global variables in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!