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

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>

2. Importieren Sie

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

3. Verwenden Sie

rrree

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

2 sie zu vue

<template>
    {{globalHttpUrl}}
</template>

3. Verwenden Sie

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

, 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
    }
  },

// 配置使用formDate
Vue.http.options.emulateHTTP = true
Vue.http.options.emulateJSON = true

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>

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!