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

vue.js でグローバル変数を宣言する方法: 最初に専用のグローバル変数モジュール ファイルをセットアップし、モジュール内の変数のいくつかの初期状態を定義します。次に、export default を使用してそれらを公開し、最後に [main] を使用します。 [main.js] Vue.prototype] の .js] を vue インスタンスにマウントし、モジュールを導入します。

このチュートリアルの動作環境: Windows7 システム、vue2.9 バージョン。この方法はすべてのブランドのコンピューターに適しています。

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 サイトの他の関連記事を参照してください。