Vue3 props-Attribute

Vue3 选项式 APIVue3 Options API

propsist eine Möglichkeit, Daten zwischen Komponenten weiterzugeben.

In Vue.js kann eine ElternkomponentepropsDaten an untergeordnete Komponenten weitergeben. Nachdem die untergeordnete Komponente diese Daten empfangen hat, kann sie die Daten rendern oder andere Operationen basierend auf den Daten ausführen.

Analogie

Sie könnenpropsStell es dir wie einen Briefträger vor. Die übergeordnete Komponente ist der Absender, die untergeordnete Komponente ist der Empfänger. Die übergeordnete Komponente übergibt die Daten (einen Brief) durchprops(den Briefträger) an die untergeordnete Komponente. Nach Empfang der Daten kann die untergeordnete Komponente sie entsprechend dem Inhalt verarbeiten.

Wie verwendet man Props?

In Vue.js ist die Verwendung vonpropssehr einfach. Im Folgenden verwenden wir ein Beispiel, um die Verwendung zu veranschaulichen.props。

Beispiel: Props übergeben und empfangen

Angenommen, wir haben eine übergeordnete KomponenteParentComponentund eine untergeordnete KomponenteChildComponent. Wir möchten, dass die übergeordnete Komponente eine Nachricht an die untergeordnete Komponente übergibt.

1. Übergeordnete Komponente (ParentComponent.vue)

Beispiel

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

2. Kindkomponente (ChildComponent.vue)

Beispiel

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Erklärung

  1. Elternkomponente: In der Elternkomponente:message="parentMessage"wirdparentMessageübergeben wir Daten an die Kindkomponente.parentMessageist eine Variable, die in der Elternkomponente definiert ist, und ihr Wert ist'Hello from Parent!'。

  2. Kindkomponente: In der Kindkomponente verwenden wirprops, um die von der Elternkomponente übergebenen Daten zu empfangen.messageist in der Kindkomponente definiertprops, und ihr Typ istString, und sie wird gesetzt aufrequired: true, was darauf hinweist, dass diespropsist erforderlich.

  3. Rendering: Nachdem die Kindkomponente empfängtmessage, rendert sie es in der Vorlage und zeigt es als<p>Hello from Parent!</p>。

Typen und Validierung von Props

In Vue.js kannst dupropsTypen und Validierungsregeln angeben, um sicherzustellen, dass die übergebenen Daten den Erwartungen entsprechen.

Beispiel: Typen und Validierung

Beispiel

props: {
  message: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  },
  hobbies: {
    type: Array,
    validator: function (value) {
      return value.length > 0;
    }
  }
}

Erklärung

  1. **type**: angebenpropsden Datentyp. Er kannString、Number、Boolean、Array、Objectusw.

  2. **required**: angebenpropsob es erforderlich ist. Wenn auftrue, muss die übergeordnete Komponente dieseprops, andernfalls wird eine Warnung ausgegeben.

  3. **default**: fürpropseinen Standardwert festlegen. Wenn die übergeordnete Komponente diese nicht übergibtprops, verwendet die untergeordnete Komponente den Standardwert.

  4. **validator**: benutzerdefinierte Validierungsfunktion, die verwendet wird, um zu validierenpropsob der Wert bestimmte Bedingungen erfüllt.

Hinweise

  1. Einweg-Datenfluss: In Vue.js,propsist unidirektional, was bedeutet, dass Daten nur von der übergeordneten Komponente zur untergeordneten Komponente fließen können. Eine untergeordnete Komponente sollte nicht direktpropsden Wert ändern. Wenn Sie ihn ändern müssen, können Sie die übergeordnete Komponente benachrichtigen, die Änderung vorzunehmen, indem Sie ein Ereignis auslösen.

  2. Namenskonventionen：propsEs wird empfohlen, camelCase für die Benennung zu verwenden, zum BeispieluserName. Beim Übergebenprops, wird empfohlen, kebab-case als Trennzeichen zu verwenden, zum Beispieluser-name。

  3. Dynamische Props: lassen sich erreichen durchv-bindoder:dynamische Bindungprops, zum Beispiel:message="parentMessage"。

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen