Vue3: Single-File-Komponenten (SFC) erstellen

Vues Single-File-Komponente (d. h.*.vueeine Datei, Englisch: Single-File Component, abgekürzt SFC) ist ein spezielles Dateiformat, das es uns ermöglicht, das Template, die Logik und die Styles einer Vue-Komponente in einer einzigen Datei zu kapseln.

In Vue3 kannst du.vueeine Datei verwenden, um Single-File-Komponenten (Single File Components, SFCs) zu erstellen. Diese Datei enthält das Template, den JavaScript-Code und die CSS-Styles der Komponente.

Jetzt löschen wirnpm init vue@latestden gesamten Inhalt in dem durch den Befehl erstellten Beispielprojekt (sieheVue3 Installation), damit wir unsere eigene einfache Webseite in Vue erstellen können.

Bevor wir mit dem Schreiben von Code beginnen, lösche den gesamten Inhalt innerhalb der Tags <template>, <script> und <style> sowie alle Attribute wie setup oder scoped.

Deine App.vue-Datei sollte jetzt so aussehen:

App.vue-Datei:

<script></script>

<template></template>

<style></style>

Gleichzeitig können wir zuerst densrc-Ordner im Verzeichnis sowieassetsundcomponents löschen., und wir können die Dateien darin später selbst hinzufügen.

Ändern Sie den Code der Datei main.js wie folgt:

Code der Datei main.js:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Jetzt haben wir ein einfaches Projekt erstellt. Schreiben Sie den folgenden Code in die Datei App.vue:

Code der Datei App.vue:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, EXAMPLE!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
</style>

Im obigen Beispiel haben wir eine einfache Komponente definiert, die einen Titel enthält. Das Template der Komponente enthält ein <h1>-Element, das die Template-Syntax von Vue3 verwendet, um die Eigenschaft message an den Textinhalt dieses Elements zu binden.

Der JavaScript-Teil enthält eine data-Funktion, die ein Objekt zurückgibt, das die Eigenschaft message enthält, die wir an das Template gebunden haben.

Schließlich definiert der CSS-Stil die Titelfarbe als Blau.

Im JavaScript-Teil der Komponente haben wir die neue `export default`-Syntax verwendet, die es uns ermöglicht, die Komponentendefinition als Standardobjekt zu exportieren. In Vue3 können wir diese Syntax verwenden, um Komponenten zu definieren, ohne wie in Vue2 die Funktion `Vue.component` verwenden zu müssen.

Besuchen Siehttp://localhost:5173/, das Ausführungsergebnis des obigen Codes ist:

Komponenten verwenden

Nachdem wir eine Komponente definiert haben, können wir diese Komponente in anderen Komponenten verwenden.

Um eine Komponente zu verwenden, müssen wir zuerst die Komponente erstellen. Zum Beispiel erstellt das folgende Beispiel im./src/components/Verzeichnis dieHelloExample.vueKomponentendatei, und der Code lautet wie folgt:

Code der Datei ./src/components/HelloExample.vue:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Example!'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
</style>

Dann importieren und definieren wir die Komponente in der Datei ./src/main.js:

Code der Datei ./src/main.js:

import { createApp } from 'vue'

import App from './App.vue'
import HelloExample from './components/HelloExample.vue'

const app = createApp(App)
app.component('hello-example', HelloExample) // Benutzerdefiniertes Tag
app.mount('#app')

Im Template der übergeordneten Komponente können wir benutzerdefinierte Tags verwenden, um die untergeordnete Komponente einzubinden, wie im folgenden Code der Datei App.vue gezeigt:

Code der Datei App.vue

<template>
  <div>
    <hello-example></hello-example>
  </div>
</template>

Besuchen Siehttp://localhost:5173/, das Ausführungsergebnis des obigen Codes ist:

Andere Erweiterungen