Heim > Web-Frontend > js-Tutorial > Wie definiere ich globale Variablen und globale Methoden in Vue? (Code)

Wie definiere ich globale Variablen und globale Methoden in Vue? (Code)

不言
Freigeben: 2018-08-01 17:04:50
Original
6859 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie globale Variablen und globale Methoden in Vue definieren. (Code), es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Globale Importdatei

1. Definieren Sie zunächst die gemeinsame Komponente common.vue

<script type="text/javascript">
    // 定义一些公共的属性和方法
    const httpUrl = 'http://39.105.17.99:8080/'
    function commonFun() {
        console.log("公共方法")
    }
    // 暴露出这些属性和方法
    export default {
        httpUrl,
        commonFun
    }
</script>
Nach dem Login kopieren

2. Importieren Sie

<script>
// 导入共用组件
import global from './common.vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用
      globalHttpUrl: global.httpUrl
    }
  },
Nach dem Login kopieren
3. Verwenden Sie

rrree

2. Fügen Sie globale Variablen und Methoden wie oben ein.

2 sie zu vue

<template>
    {{globalHttpUrl}}
</template>
Nach dem Login kopieren

3. Verwenden Sie

// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global
Nach dem Login kopieren

, um die Beispieldatei

common.vue, die öffentliche Datei im Projekt oder die globale Datei zusammenzufassenvue-resource muss zuerst sein. Konfigurieren Sie main.js

export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用, 可以使用this变量来访问
      globalHttpUrl: this.COMMON.httpUrl
    }
  },
Nach dem Login kopieren
// 配置使用formDate
Vue.http.options.emulateHTTP = true
Vue.http.options.emulateJSON = true
Nach dem Login kopieren

und verwenden Sie

<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function promiseFun (url, params) {
  return new Promise((resolve, reject) => {
    this.$http.post(this.globalHttpUrl + url, params).then(
      (res) => {
        resolve(res.json())
      },
      (err) => {
        reject(err.json())
      }
    )
  })
}
// 暴露出这些属性和方法
export default {
  httpUrl,
  promiseFun
}
</script>
Nach dem Login kopieren
Empfohlene verwandte Artikel:


Wie mounte ich Vue-Komponenten global? Einführung in die Methode zum globalen Mounten von Vue-Komponenten (Code)

Detaillierte Erläuterung der im Vue-Projekt definierten globalen Variablen und globalen Funktionen


Über die ausführliche Erläuterung verschiedener Methoden zur Definition globaler Variablen in VUE

Das obige ist der detaillierte Inhalt vonWie definiere ich globale Variablen und globale Methoden in Vue? (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage