ホームページ > ウェブフロントエンド > jsチュートリアル > Vue でグローバル変数とグローバル メソッドを定義するにはどうすればよいですか? (コード)

Vue でグローバル変数とグローバル メソッドを定義するにはどうすればよいですか? (コード)

不言
リリース: 2018-08-01 17:04:50
オリジナル
6969 人が閲覧しました

この記事では、Vue でグローバル変数とグローバル メソッドを定義する方法を紹介します。 (コード)、それは特定の参考値を必要としている友人がそれを参照できることを願っています。

1. グローバルインポートファイル

1. まず共通コンポーネントcommon.vue

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

    // 定义一些公共的属性和方法

    const httpUrl = 'http://39.105.17.99:8080/'

    function commonFun() {

        console.log("公共方法")

    }

    // 暴露出这些属性和方法

    export default {

        httpUrl,

        commonFun

    }

</script>

ログイン後にコピー

を定義します2. 使用する必要がある場所に

1

2

3

4

5

6

7

8

9

10

11

12

<script>

// 导入共用组件

import global from './common.vue'

export default {

  data () {

    return {

      username: '',

      password: '',

      // 赋值使用

      globalHttpUrl: global.httpUrl

    }

  },

ログイン後にコピー

をインポートします3.

1

2

3

<template>

    {{globalHttpUrl}}

</template>

ログイン後にコピー

を使用します2. .js

1 -resource は、


1

2

3

// 导入共用组件

import global from './common.vue'

Vue.prototype.COMMON = global

ログイン後にコピー
を使用するには、最初に main.js を設定する必要があります

1

2

3

4

5

6

7

8

9

export default {

  data () {

    return {

      username: '',

      password: '',

      // 赋值使用, 可以使用this变量来访问

      globalHttpUrl: this.COMMON.httpUrl

    }

  },

ログイン後にコピー

1

2

3

// 配置使用formDate

Vue.http.options.emulateHTTP = true

Vue.http.options.emulateJSON = true

ログイン後にコピー

おすすめの関連記事:

vue コンポーネントをグローバルにマウントするには? Vue コンポーネントをグローバルにマウントする方法 (コード) の紹介

Vue プロジェクトのグローバル変数とグローバル関数の詳細な説明


VUE でグローバル変数を定義するいくつかの方法の詳細な説明

以上がVue でグローバル変数とグローバル メソッドを定義するにはどうすればよいですか? (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート