Grundlagen zu Komponenten #

Komponenten ermöglichen es, das User Interface in unabhängige und wiederverwendbare Teile aufzuteilen und jedes einzelne Teil isoliert zu konzipieren. Üblicherweise wird eine Applikation als Baum verschachtelter Komponenten organisiert:

Dies ist der Art, wie native HTML-Elemente ineinander verschachtelt werden, sehr ähnlich, wobei Vue sein eigenens Komponentenmodell nutzt. Dieses Modell ermöhlicht es, den Inhalt und die Funktionalität - also die Anwendungslogik - einer selbsterstellten Komponete zu kapseln. Vue harmoniert dabei gut mit nativen Komponenten (Web Components). Weiterführende Informationen zum Gemeinsamkeiten und Unterschieden von Komponenten in Vue und nativen Komponenten können Sie hier finden.

Komponenten definieren #

Wird die Applikation mit einem Build Tool erstellt, definieren wir eine Vue-Komponente üblicherweise in einer eigenen Datei, die mit Dateiendung .vue gespeichert wird. Diese Komponente wird daher als Single-File Component bezeichnet (oder oft auch als SFC abgekürzt):

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Du hast mich {{ Anzahl }} Mal geklickt.</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Du hast mich {{ Anzahl }} Mal geklickt.</button>
</template>

Wird kein Build Tool verwendet, kann eine Vue-Komponente als normales JavaScript-Objekt erstellt werden. Dieses Objekt enthält dabei einige Vue-spezifische Optionen:

export default {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      Du hast mich {{ Anzahl }} Mal geklickt.
    </button>`
}

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // or `template: '#my-template-element'`
}

Das Template ist hierbei ein Inline-JavaScript-String. Vue wird diesen String zu Laufzeit kompilieren. Es kann auch ein ID-Selektor verwendet werden, der auf ein DOM-Element verweist (üblicherweise das native <template> Element) - Vue nutzt dann dessen INhalt als Quelle für das Vue-Template.

Das Beispiel definiert eine einzelne Komponente und exportiert diese als Standardexport in einer .js-Datei. Es können aber auch benannte Exporte verwendet werden, um mehrere Komponenten aus derselben Datei zu exportieren.

Komponenten nutzen #

Um eine untergeordnete Komponente zu verwenden, müssen wir sie in die übergeordnete Komponente importieren. Angenommen, wir haben unsere Zählerkomponente in einer Datei mit dem Namen "ButtonCounter.vue" platziert, wird die Komponente als Standard-Export der Datei angezeigt:

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

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

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

Es ist auch möglich, eine Komponente global zu registrieren, so dass sie für alle Komponenten in einer bestimmten Anwendung verfügbar ist, ohne dass sie importiert werden muss. Die Vor- und Nachteile der globalen gegenüber der lokalen Registrierung werden im Abschnitt Komponentenregistrierung diskutiert.

Die Komponenten können beliebig oft wiederverwendet werden:

<h1>Here are many child components!</h1>
<ButtonCounter />
<ButtonCounter />
<ButtonCounter />

Beachten Sie, dass beim Anklicken der Schaltflächen jede ihre eigene, separate "Anzahl" beibehält. Das liegt daran, dass jedes Mal, wenn Sie eine Komponente verwenden, eine neue Instanz der Komponente erstellt wird.

In SFCs wird empfohlen, Tag-Namen für untergeordnete Komponenten in PascalCase zu verwenden, um sie von nativen HTML-Elementen zu unterscheiden. Obwohl native HTML-Tag-Namen Groß- und Kleinschreibung nicht berücksichtigen, ist Vue SFC ein kompiliertes Format, so dass wir in der Lage sind, Tag-Namen mit Groß- und Kleinschreibung zu verwenden. Wir sind auch in der Lage, /> zu verwenden, um ein Tag zu schließen.

Wenn Sie Ihre Templates direkt in einem DOM erstellen (z.B. als Inhalt eines nativen <Template>-Elements), wird das Template dem nativen HTML-Parsing-Verhalten des Browsers unterliegen. In solchen Fällen müssen Sie kebab-case und explizite schließende Tags für Komponenten verwenden:

<!-- if this template is written in the DOM -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

Siehe DOM template parsing caveats für weitere Details.

Passende Requisiten #

Wenn wir einen Blog erstellen, benötigen wir wahrscheinlich eine Komponente, die einen Blogbeitrag darstellt. Wir möchten, dass alle Blogeinträge das gleiche visuelle Layout haben, aber mit unterschiedlichem Inhalt. Eine solche Komponente ist nur dann nützlich, wenn Sie ihr Daten übergeben können, z. B. den Titel und den Inhalt des bestimmten Beitrags, den wir anzeigen möchten. An dieser Stelle kommen Props ins Spiel.

Props sind benutzerdefinierte Attribute, die Sie für eine Komponente registrieren können. Um einen Titel an unsere Blogpost-Komponente zu übergeben, müssen wir ihn in der Liste der Requisiten, die diese Komponente akzeptiert, deklarieren, indem wir die props OptiondefineProps Makro:

<!-- BlogPost.vue -->
<script>
export default {
  props: ['title']
}
</script>

<template>
  <h4>{{ title }}</h4>
</template>

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{{ title }}</h4>
</template>

const props = defineProps(['title'])
console.log(props.title)

export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}

Eine Komponente kann so viele Requisiten haben, wie Sie möchten, und standardmäßig kann jeder Wert an jede Requisite übergeben werden.

Sobald eine Requisite registriert ist, können Sie ihr Daten als benutzerdefiniertes Attribut übergeben, etwa so:

<BlogPost title="My journey with Vue" />
<BlogPost title="Blogging with Vue" />
<BlogPost title="Why Vue is so fun" />

In einer typischen Anwendung werden Sie jedoch wahrscheinlich ein Array von Beiträgen in Ihrer übergeordneten Komponente haben:

export default {
  // ...
  data() {
    return {
      posts: [
        { id: 1, title: 'Meine Reise mit Vue' },
        { id: 2, title: 'Bloggen mit Vue' },
        { id: 3, title: 'Warum Vue so viel Spaß macht' }
      ]
    }
  }
}

const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])

Dann wollen Sie eine Komponente für jede, mit v-for zu rendern:

<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
 />

Beachten Sie, wie v-bind verwendet wird, um dynamische Prop-Werte zu übergeben. Dies ist besonders nützlich, wenn Sie den genauen Inhalt, den Sie rendern werden, nicht im Voraus kennen.

Das ist alles, was Sie im Moment über Requisiten wissen müssen. Wenn Sie diese Seite gelesen haben und mit ihrem Inhalt vertraut sind, empfehlen wir Ihnen, später wiederzukommen, um den vollständigen Leitfaden zu Props zu lesen.

Anhören von Veranstaltungen #

Bei der Entwicklung unserer <BlogPost>-Komponente kann es erforderlich sein, dass einige Funktionen mit der übergeordneten Komponente rückgekoppelt werden müssen. Wir könnten zum Beispiel beschließen, eine Funktion für die Barrierefreiheit einzubauen, um den Text von Blogeinträgen zu vergrößern, während der Rest der Seite in seiner Standardgröße bleibt.

Im Elternteil können wir diese Funktion unterstützen, indem wir eine postFontSize data propertyref:

data() {
  return {
    posts: [
      /* ... */
    ],
    postFontSize: 1
  }
}

const posts = ref([
  /* ... */
])

const postFontSize = ref(1)

Which can be used in the template to control the font size of all blog posts:

<div :style="{ fontSize: postFontSize + 'em' }">
  <BlogPost
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
   />
</div>

Now let's add a button to the <BlogPost> component's template:

<!-- BlogPost.vue, omitting <script> -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button>Enlarge text</button>
  </div>
</template>

The button doesn't do anything yet - we want clicking the button to communicate to the parent that it should enlarge the text of all posts. To solve this problem, components provide a custom events system. The parent can choose to listen to any event on the child component instance with v-on or @, just as we would with a native DOM event:

<BlogPost
  ...
  @enlarge-text="postFontSize += 0.1"
 />

Then the child component can emit an event on itself by calling the built-in $emit method, passing the name of the event:

<!-- BlogPost.vue, omitting <script> -->
<template>
  <div class="blog-post">
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">Enlarge text</button>
  </div>
</template>

Thanks to the @enlarge-text="postFontSize += 0.1" listener, the parent will receive the event and update the value of postFontSize.

We can optionally declare emitted events using the emits optiondefineEmits macro:

<!-- BlogPost.vue -->
<script>
export default {
  props: ['title'],
  emits: ['enlarge-text']
}
</script>

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>

This documents all the events that a component emits and optionally validates them. It also allows Vue to avoid implicitly applying them as native listeners to the child component's root element.

<script setup>
const emit = defineEmits(['enlarge-text'])

emit('enlarge-text')
</script>

export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}

That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Custom Events.

Content Distribution with Slots #

Just like with HTML elements, it's often useful to be able to pass content to a component, like this:

<AlertBox>
  Something bad happened.
</AlertBox>

Which might render something like:

This can be achieved using Vue's custom <slot> element:

<template>
  <div class="alert-box">
    <strong>This is an Error for Demo Purposes</strong>
    <slot />
  </div>
</template>

<style scoped>
.alert-box {
  /* ... */
}
</style>

As you'll see above, we use the <slot> as a placeholder where we want the content to go – and that's it. We're done!

That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Slots.

Dynamic Components #

Sometimes, it's useful to dynamically switch between components, like in a tabbed interface:

The above is made possible by Vue's <component> element with the special is attribute:

<!-- Component changes when currentTab changes -->
<component :is="currentTab"></component>

<!-- Component changes when currentTab changes -->
<component :is="tabs[currentTab]"></component>

In the example above, the value passed to :is can contain either:

• the name string of a registered component, OR
• the actual imported component object

You can also use the is attribute to create regular HTML elements.

When switching between multiple components with <component :is="...">, a component will be unmounted when it is switched away from. We can force the inactive components to stay "alive" with the built-in <KeepAlive> component.

DOM Template Parsing Caveats #

If you are writing your Vue templates directly in the DOM, Vue will have to retrieve the template string from the DOM. This leads to some caveats due to browsers' native HTML parsing behavior.

Case Insensitivity #

HTML tags and attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you’re using in-DOM templates, PascalCase component names and camelCased prop names or v-on event names all need to use their kebab-cased (hyphen-delimited) equivalents:

// camelCase in JavaScript
const BlogPost = {
  props: ['postTitle'],
  emits: ['updatePost'],
  template: `
    <h3>{{ postTitle }}</h3>
  `
}

<!-- kebab-case in HTML -->
<blog-post post-title="hello!" @update-post="onUpdatePost"></blog-post>

Self Closing Tags #

We have been using self-closing tags for components in previous code samples:

<MyComponent />

This is because Vue's template parser respects /> as an indication to end any tag, regardless of its type.

In DOM templates, however, we must always include explicit closing tags:

<my-component></my-component>

This is because the HTML spec only allows a few specific elements to omit closing tags, the most common being <input> and <img>. For all other elements, if you omit the closing tag, the native HTML parser will think you never terminated the opening tag. For example, the following snippet:

<my-component /> <!-- we intend to close the tag here... -->
<span>hello</span>

will be parsed as:

<my-component>
  <span>hello</span>
</my-component> <!-- but the browser will close it here. -->

Element Placement Restrictions #

Some HTML elements, such as <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> can only appear inside certain other elements.

This will lead to issues when using components with elements that have such restrictions. For example:

<table>
  <blog-post-row></blog-post-row>
</table>

The custom component <blog-post-row> will be hoisted out as invalid content, causing errors in the eventual rendered output. We can use the special is attribute as a workaround:

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's Essentials. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself - build something fun, or check out some of the Examples if you haven't already.

Once you feel comfortable with the knowledge you've just digested, move on with the guide to learn more about components in depth.