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

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

coldplay.xixi

リリース： 2023-01-13 00:44:58

オリジナル

6298 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 &#39;vue&#39;
import App from &#39;./App&#39;
import router from &#39;./router&#39;
import fastclick from &#39;fastclick&#39;
import global_ from &#39;./components/Global.vue&#39;  //引入全局组件
Vue.prototype.GLOBAL = global_;  //修改原型
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: &#39;#app&#39;,  
  router, 
  components: { App },
  template: &#39;<App/>&#39;
})

ログイン後にコピー

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

this.GLOBAL で

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