Erste Schritte mit der VUE3-Entwicklung: Verwendung von Komponenten

Vue ist derzeit ein beliebtes JavaScript-Framework, das besonders in der Webanwendungsentwicklung beliebt ist. Mit der Veröffentlichung der VUE3-Version bietet VUE nicht nur die bisherigen Vorteile, sondern fügt auch einige neue Funktionen hinzu, wie z. B. objektorientierte Programmierung und Leistungsverbesserungen. In diesem Artikel erfahren Sie, wie Sie Komponenten in VUE3 verwenden und wie Sie Komponenten zum Erstellen einer einfachen Webseite verwenden.

Was sind VUE-Komponenten?

VUE-Komponenten sind wiederverwendbare Codemodule, die zum Erstellen von Benutzeroberflächen verwendet werden. Jede Komponente enthält HTML-, JavaScript- und CSS-Code und kann als einzelne Einheit direkt im Code verwendet werden.

Nehmen Sie als Beispiel eine einfache Schaltflächenkomponente. Hier ist der Code:

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

Diese Schaltflächenkomponente verfügt über eine Eigenschaft buttonText für den auf der Schaltfläche angezeigten Text. Wenn Sie die Komponente verwenden, müssen Sie dieses Attribut übergeben. Hier ist ein Beispielcode, der diese Komponente verwendet:

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Hier wird die Komponente in Vue eingeführt und dann in der Vorlage verwendet.

Komponenten erstellen und verwenden

Um eine neue Komponente zu erstellen, müssen Sie die von Vue bereitgestellte Methode Vue.component() verwenden. Diese Methode empfängt zwei Parameter: den Komponentennamen und das Objekt, das die Komponente definiert. Hier ist das einfachste Komponentenbeispiel:

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

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

In diesem Codeausschnitt werden alle anderen Codes außer dem Komponentennamen im Objekt definiert. Komponentenvariablen werden normalerweise mit idiomatischen Methoden definiert, beispielsweise durch die Verwendung von Großbuchstaben im Klassennamen, um die Komponente von gewöhnlichem HTML-Markup zu unterscheiden.

Führen Sie diese Komponente in Vue ein:

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

Sie können diese Komponente zu diesem Zeitpunkt in der Vorlage verwenden.

Verwenden von Komponenten in VUE3

VUE3 bietet eine bessere Möglichkeit, Komponenten zu erstellen und zu verwenden. Verwenden Sie in VUE3 die Methode createApp, um eine Vue-Anwendung zu erstellen, und verwenden Sie die Methode app.component(), um Komponenten zu registrieren. Hier ist der Beispielcode:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

Im obigen Code wird die Methode createApp zum Erstellen der Vue-Anwendung und app.component() zum Registrieren der Komponente verwendet. Die letzte Codezeile wird verwendet, um die Anwendung in das HTML-Dokument einzubinden.

Übergabe von Komponentenparametern

Wie oben erwähnt, besteht eine häufige Verwendung von Komponenten in VUE darin, Eigenschaften und Ereignisse zu übergeben. Im folgenden Codeausschnitt wird beispielsweise das Attribut „

<MyComponent :width="200" @clicked="onClick" />

width“ an die Komponente übergeben, das Klickereignis wird ausgelöst, wenn auf die Komponente geklickt wird, und onClick ist hier der Ereignishandler.

Um die übergebenen Eigenschaften und Ereignisse in der Komponente verwenden zu können, müssen Sie die von VUE bereitgestellten Props- und Emit-Methoden verwenden. Zum Beispiel:

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

In einer Komponente werden Eigenschaften als Teil des Props-Objekts deklariert. Standardmäßig sind Requisiten beliebiger Art. In diesem Beispiel wird das Breitenattribut als Zahlentyp definiert und dem Standardwert 100 zugewiesen. In der Vorlage wird die Breite übergeben und zum Aktualisieren des Stils der Komponente verwendet.

Die Verwendung von Ereignissen in Komponenten ist sehr einfach. Verwenden Sie einfach die Methode $emit, um das Ereignis aufzurufen. In diesem Beispiel wird das Clicked-Ereignis aufgerufen, wenn der Benutzer auf die Komponente klickt.

Zusammenfassung

Vue ist ein leistungsstarkes JavaScript-Framework und sein Komponentensystem ist ein wichtiger Bestandteil beim Erstellen wiederverwendbarer und skalierbarer Webanwendungen. In diesem Artikel wird erläutert, wie Sie mit Vue Komponenten erstellen und verwenden, die Methode createApp in Vue3 zum Erstellen einer Vue-Anwendung verwenden und die Methode app.component () zum Registrieren von Komponenten verwenden. Komponenten können Requisiten und Emissionsmethoden verwenden, um Eigenschaften und Ereignisse zu übergeben. Ich hoffe, dass dieser Artikel für Entwickler hilfreich ist, die VUE erlernen möchten.

Das obige ist der detaillierte Inhalt vonErste Schritte mit der VUE3-Entwicklung: Verwendung von Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!