vue.js を使用してグローバル変数を定義する方法

vue.js を使用してグローバル変数を定義する方法: まず、別のグローバル変数モジュール ファイルを作成し、モジュール内の変数の初期状態をいくつか定義し、それを [main.js] に導入して渡します。 [Vue.prototype] 経由 vue インスタンスにマウントされます。

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

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

vue.js を使用してグローバル変数を定義する方法:

原則:

1. 新しいグローバル変数モジュール ファイルを個別に作成し、モジュール内の変数のいくつかの初期状態を定義し、デフォルトのエクスポートを使用してそれらを公開します。

2. main.js に導入し、Vue.prototype を通じて vue インスタンスにマウントします。他のモジュール ファイルで使用する場合;

3. または、使用するために必要なモジュール ファイルに直接導入する;

ステップ 1. &lt のみを含むグローバル コンポーネント Global.vue を定義します。 ;script&gt ;

<!--设置全局变量-->
<script>
    //接口地址
    const BASE_URL = &#39;http://118.189.105.152:7181/qianzhang-transf/index/&#39;; //定义全局接口地址
    //请求头部       
    const reqHead = { 
        "transDate": "20180816",
        "encryptFlag": "1",
        "seqNo": "2018081628507127",
        "serviceID": "loanLmtQryHXMKL",
        "transTime": "174341",
        "channelID": "netbank"
    }
    export default {   //将常量暴露出去
        BASE_URL,
        reqHead,
    }
</script>

ステップ 2. プロトタイプ チェーンを変更します

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import global_ from './components/Global.vue'  //引入全局组件
Vue.prototype.GLOBAL = global_;  //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',  
  router, 
  components: { App },
  template: &#39;<App/>&#39;
})

ステップ 3. 必要な vue ページ

this.GLOBAL で

を直接使用します。 BASE_URL、定義された定数値を取得できます

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

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