Wie definiere und verwende ich globale Variablen und globale Funktionen in Vue? (mit Code)

In diesem Artikel erfahren Sie, wie Sie globale Variablen und globale Funktionen in Vue definieren und verwenden. (Beigefügt ist der Code), der einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen. Ich hoffe, er wird für Sie hilfreich sein.

1. Variablen definieren und global verwenden

Prinzip:
1. Erstellen Sie separat eine neue globale Variablenmoduldatei, definieren Sie einige Anfangszustände der Variablen im Modul und verwenden Sie den Exportstandard, um sie verfügbar zu machen.
2. Führen Sie es in main.js ein und mounten Sie es über Vue.prototype in der Vue-Instanz. Zur Verwendung durch andere Moduldateien
3. Oder fügen Sie es zur Verwendung direkt in die erforderliche Moduldatei ein.

Projektverzeichnis

Schritt 1. Erstellen Sie ein neues global_variable.js Datei, die zum Speichern von Variablen verwendet wird. Das Beispiel lautet wie folgt:

const baseURL = 'www.baidu.com'const token = '123456'const userSite = '林花落了春红，太匆匆'export default {
  baseURL,
  token,
  userSite
}

• Methode 1: Verwenden Sie (lokale Referenz) in der Moduldatei, die vorhanden sein muss Verwendet wird das Beispiel wie folgt:

• Methode 2: Globale Verwendung, das Beispiel lautet wie folgt folgt:

1. Fügen Sie die Datei global_variable.js in die Datei main.js ein und hängen Sie sie mit Vue.prototype an die Vue-Instanz.

2. In den Modulen, die in der Datei verwendet werden müssen (keine Einführung erforderlich, direkt über this verwenden), lautet das Beispiel wie folgt:

2. Definieren Sie die Funktion und verwenden Sie sie global

Prinzip:

Erstellen Sie eine neue Moduldatei und mounten Sie dann die Funktion über Vue in der Vue-Instanz .prototype in main.js und führen Sie die Funktion über den dadurch ausgegebenen Funktionsnamen aus.

Methode 1. Schreiben Sie die Funktion direkt in main.js

Einfache Funktionen können direkt in main.js geschrieben werden:

Methode 2. Erstellen Sie eine neue Moduldatei und mounten Sie sie auf main.js

Das Projektverzeichnis lautet wie folgt

1 , Das Codebeispiel in der global_func.js-Datei lautet wie folgt:

// param为传入参数
function packageFunc (param) {
  alert(param)
}

export default {  // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
  install: function (Vue) {
    Vue.prototype.global_func = (param) => packageFunc(param)
  }
}

2. Das Codebeispiel in der main.js-Datei lautet wie folgt:

3. Verwenden Sie es in der Moduldatei, die aufgerufen werden muss this.输出的函数名, Aufruf, Codebeispiel lautet wie folgt:

Verwandte Empfehlungen:

vollständige Vue-Analyse – Vue+Vue-Router+Vuex+Axios

vue-cli schreibt Vue-Plug-in-Instanz

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