Vue ruft Methoden in externen JS auf

Vue ist ein sehr beliebtes JavaScript-Framework, das häufig bei der Entwicklung von Webanwendungen verwendet wird. Das Vue-Framework bietet viele praktische Funktionen, die die Entwicklung von Webanwendungen sehr einfach machen. Bei der Entwicklung von Anwendungen mithilfe des Vue-Frameworks müssen wir jedoch manchmal Methoden in externen JS-Dateien aufrufen. In diesem Artikel wird erläutert, wie Methoden in externen JS-Dateien in einer Vue-Anwendung aufgerufen werden.

Um Methoden in externen JS-Dateien in Vue-Anwendungen aufzurufen, müssen wir die folgenden Schritte ausführen:

Schritt 1: Externe JS-Dateien in Vue-Anwendungen einführen

In Vue-Anwendungen können wir Skript-Tags verwenden, um externe JS-Dateien zu importieren Datei wird importiert. Um externe JS-Dateien einzuführen, können wir Skript-Tags im Template-Tag der Vue-Datei hinzufügen. Beispielsweise können wir eine externe JS-Datei mit dem Namen hello.js wie folgt einführen:

<template>
  <div>
    <h1>调用外部JS文件中的方法</h1>
  </div>
</template>

<script src="./hello.js"></script>

Schritt 2: Vue-Komponenten definieren

In einer Vue-Anwendung müssen wir Vue-Komponenten definieren, damit sie in Vorlagen aufgerufen werden können. Wir können Vue-Komponenten in Vue-Dateien definieren. Der folgende Code definiert beispielsweise eine Vue-Komponente namens HelloWorld:

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      greeting: "Hello, World!",
    };
  },
};
</script>

Schritt 3: Methoden in externen JS-Dateien aufrufen

Sobald wir die externe JS-Datei in die Vue-Anwendung eingeführt und die Vue-Komponente definiert haben, können wir Methoden aufrufen in externen JS-Dateien innerhalb von Vue-Komponenten. Um Methoden in externen JS-Dateien aufzurufen, müssen wir die erstellte Hook-Funktion der Vue-Instanz verwenden. Zuerst müssen wir die Vue-Komponente mit dem ref-Attribut benennen. Beispielsweise können wir die HelloWorld-Komponente hello-world nennen. Anschließend können wir das Attribut $refs in der erstellten Hook-Funktion verwenden, um auf die Vue-Komponente zuzugreifen.

<template>
  <div>
    <hello-world ref="hello"></hello-world>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    this.$nextTick(() => {
      this.$refs.hello.setGreeting("Hello, Vue!");
    });
  },
};
</script>

Im Codeausschnitt hier sind einige wichtige Punkte zu beachten:

• Zuerst benennen wir die HelloWorld-Komponente mit dem ref-Attribut und referenzieren die Komponente mit diesem Namen in der Vue-Instanz.
• Dann greifen wir in der erstellten Hook-Funktion über das Attribut $refs auf die HelloWorld-Komponente zu. Die Eigenschaft $refs ist ein Objekt, das Verweise auf Vue-Komponenten enthält.
• Schließlich haben wir die setGreeting-Methode aufgerufen und ihr die Zeichenfolge „Hello, Vue!“ als Parameter übergeben. Wir haben die setGreeting-Methode in der Datei hello.js definiert, daher ruft diese Codezeile die setGreeting-Methode in der Datei hello.js auf und übergibt ihr die Parameter.

Hier ist der Inhalt der hello.js-Datei:

function setGreeting(greeting) {
  document.getElementById("greeting").innerText = greeting;
}

module.exports = {
  setGreeting,
};

In der hello.js-Datei definieren wir eine Methode namens setGreeting und exportieren sie zur Verwendung durch andere JavaScript-Dateien. Die Funktion dieser Methode besteht darin, den Textinhalt des Begrüßungselements mit der an ihn übergebenen Zeichenfolge festzulegen.

In diesem Artikel haben wir gelernt, wie man Methoden in externen JS-Dateien in Vue-Anwendungen aufruft. Wir haben gelernt, wie man externe JS-Dateien importiert und Vue-Komponenten definiert, und haben gezeigt, wie man das $refs-Attribut innerhalb der Vue-Komponente verwendet, um auf Methoden in der externen JS-Datei zuzugreifen. Diese Tipps können Ihnen dabei helfen, das Vue-Framework einfacher zu nutzen und Ihrer Webanwendungsentwicklung mehr Flexibilität zu verleihen.

Das obige ist der detaillierte Inhalt vonVue ruft Methoden in externen JS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!