vue.js でグローバル変数を定義する方法

vue.js でグローバル変数を定義する方法: 1. 必要に応じてグローバル変数モジュール ファイルを参照し、ファイル内の変数名からグローバル変数パラメータ値を取得します; 2. プログラム エントリ [main] .js] ファイルを作成し、[Global.vue] ファイルを [Vue.prototype] にマウントします。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

vue.js でグローバル変数を定義する方法:

原則: 専用のグローバル変数モジュール ファイルを設定します。モジュール内のいくつかの変数の初期状態を定義し、エクスポート デフォルトで公開し、main.js の Vue.prototype を使用して Vue にマウントします。インスタンスまたは他の場所で使用する必要がある場合は、このモジュールを導入するだけです。

グローバル変数モジュール ファイル:

Global.vue ファイル

<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>

方法 1: 必要に応じてグローバル変数モジュール ファイルを参照し、ファイル内の変数名は、グローバル変数パラメータ値を取得します。

    <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>

方法 2: プログラムの入り口にある main.js ファイルで、上記の Global.vue ファイルを Vue.prototype にマウントします。

    import global_ from './components/Global'//引用文件
    Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

これにより、プロジェクト全体で Global.vue モジュール ファイルを参照する必要がなくなり、これを通じて Global ファイルに定義されたグローバル変数に直接アクセスできるようになります。

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>

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がvue.js でグローバル変数を定義する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。