Erhalten Sie ein umfassendes Verständnis der drei APIs in der Vue-Komponente: Prop, Slot und Event

Egal wie komplex die Komponente ist, sie muss aus Requisiten, Ereignissen und Slots bestehen. Der folgende Artikel wird Ihnen helfen, die Requisite, den Slot und das Ereignis in der Vue-Komponente zu verstehen und zu erfahren, wie Sie diese drei APIs schreiben. Ich hoffe, er wird Ihnen hilfreich sein!

Frageneinleitung

Haben Sie das folgende Szenario erlebt: Während der Entwicklung stoßen Sie auf einige besonders häufig vorkommende Anzeigen oder Funktionen und möchten diese extrahieren und in einer unabhängigen Komponente kapseln und diese dann mit anderen Entwicklern teilen.

Um eine Komponente zu kapseln, müssen wir zunächst die grundlegende Zusammensetzung der Komponente verstehen. Egal wie komplex die Komponente ist, sie muss aus Requisiten, Ereignissen und Slots bestehen. Der Prozess des Schreibens von Komponenten ist der Prozess des Entwerfens dieser drei APIs. Wenn Sie von anderen geschriebene Komponenten lesen möchten, können Sie diese ebenfalls über diese drei APIs schnell verstehen. [Verwandte Empfehlung: „vue.js Tutorial“]

Wie sollten wir also diese drei APIs schreiben: Prop, Event und Slot?

Attribute prop

prop wird verwendet, um zu definieren, welche Attribute die Komponente akzeptieren kann.

Beim Lesen der offiziellen Vue-Website wissen wir, dass Props in Arrays oder Objekten geschrieben werden können. Der Einfachheit halber verwenden viele Leute direkt die Prop-Array-Schreibmethode, die nicht streng ist. Beim Schreiben allgemeiner Komponenten sollten wir so oft wie möglich die Prop-Objekt-Schreibmethode verwenden.

Sie können sich den folgenden Code ansehen:

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

Ich glaube, jeder kann sehen, dass prop mithilfe von Objekten geschrieben wird. Wir können überprüfen, ob die eingehenden Attribute korrekt sind, und rechtzeitig Eingabeaufforderungen geben. Dies ist besonders nützlich, wenn wir unabhängige Komponenten schreiben.

Da Vue dem Prinzip des einseitigen Datenflusses folgen muss, sollten wir nicht versuchen, den Prop-Wert zu ändern, und müssen andere Lösungen verwenden.

Gemeinsame Lösungen zum Ändern von Prop-Werten

1. Prop übergibt den Anfangswert und weist ihn den Daten zu

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

2. Prop-Werte durch Berechnung von Attributen empfangen

props: ['size'],
computed: {
  normalizedSize() {
    return this.size.trim().toLowerCase()
  }
}

Slots werden verwendet, um den Inhalt von zu verteilen Komponenten wie

<todo-button>
  Add todo
</todo-button>

rrree

Beim Rendern wird es durch Add todo ersetzt, wie z. B.

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

Dies ist die grundlegendste Verwendung von Slots. Wie der Name schon sagt, dient sie der Unterscheidung von Slots. Es können mehrere Slots festgelegt werden, zum Beispiel

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>

kommt es manchmal vor, dass Backup-Informationen für den Slot festgelegt werden, dann können Sie es wie folgt verwenden:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Die Backup-Informationen des Slots sind „Senden“

Ereignis

Ereignisname

Wenn die Daten der Unterkomponente geändert werden und Sie die übergeordnete Komponente benachrichtigen möchten, können Sie das Ereignisereignis wie folgt verwenden:

<button type="submit">
  <slot>Submit</slot>
</button>

// 子组件
this.$emit('myEvent')

Es ​​ist ersichtlich, dass beim Aufrufen der untergeordneten Komponente der Ereignisname Camel lautet case, während der Ereignisname der übergeordneten Komponente eine Kebab-Case-Benennung ist.

Benutzerdefinierte Ereignisse

Sie können Ereignisse über die Emits-Option anpassen, z. B.

// 父组件
<my-component @my-event="doSomething"></my-component>

Es ist zu beachten, dass das benutzerdefinierte Ereignis das gleiche wie das native Ereignis, z. B. Klicken, durch das benutzerdefinierte Ereignis ersetzt natives Ereignis

Komponentenorganisation

Einführung eines Bildes von der offiziellen Website

Eine Seite entspricht einem Baum, der aus Komponenten besteht.

Die Attributstütze ermöglicht die übergeordnete Komponente Um Eigenschaften an die Unterkomponenten zu übergeben, kann die untergeordnete Komponente Informationen über Ereignisse an die übergeordnete Komponente weitergeben, und der Slot wird von der übergeordneten Komponente zum Verteilen von Inhalten verwendet

.

Zusammenfassung

Zusätzlich zu diesen drei APIs haben Komponenten auch andere Inhalte, wie Lebenszyklus, Mix-Ins, berechnete Eigenschaften usw., aber für die Komponentenentwicklung reichen diese drei APIs aus. Nachdem Sie diese drei APIs beherrscht haben, müssen Sie nur noch die Interaktionslogik der Komponenten entkoppeln, versuchen, verschiedene Funktionen auf verschiedene Unterkomponenten zu verteilen, und dann einen Komponentenbaum erstellen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonErhalten Sie ein umfassendes Verständnis der drei APIs in der Vue-Komponente: Prop, Slot und Event. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!