Funktionskomponenten in Vue.js verstehen

Eine funktionale Komponente in Vue ist eine Komponente, die einen Rendering-Kontext annimmt und gerendertes HTML zurückgibt. Sie hat keine Instanzen. Um funktionale Komponenten zu erstellen, müssen Sie das Attribut „functional: true“ und die Rendering-Funktion verwenden, um das Objekt zu erstellen.

Mit funktionalen Komponenten können Sie einfache Komponenten auf prägnante Weise erstellen, indem Sie den Kontext übergeben, was sie sehr einfach und sehr beliebt macht Als nächstes werde ich in dem Artikel die funktionalen Komponenten in Vue.js vorstellen, die einen gewissen Referenzwert haben und ich hoffe, dass sie für alle hilfreich sind.

[Empfohlene Kurse: Vue.js Tutorial]

Was ist eine funktionale Komponente?

Eine funktionale Komponente kann als komponentenbezogene Funktion angesehen werden, das heißt, sie ist eine Komponente, die einen Rendering-Kontext annimmt und gerendertes HTML zurückgibt . Es gibt keine Instanz, also gibt es dies nicht.

Erstellen einer Funktionskomponente

Um eine Funktionskomponente zu erstellen, müssen Sie das Attribut functional: true und die Rendering-Funktion verwenden, um das Objekt zu erstellen. Ein Beispiel für eine FunctionalButton-Komponente wird im folgenden Beispiel erstellt:

export default {
  functional: true,
  render(createElement, context) {
    return createElement('button', 'Click me');
  }};

Rendering-Kontext

context Der in der Render-Funktion angezeigte Parameter wird als Rendering-Kontext bezeichnet. Es handelt sich um ein Objekt, das die folgenden Eigenschaften enthält:

props: Objekt, das Requisiten bereitstellt

children: Array von untergeordneten VNode-Knoten

slots: Funktion gibt Slot-Objekt zurück

parent: ein Verweis auf die übergeordnete Komponente

listeners: ein Objekt, das die auf der Komponente registrierten v-on-Listener enthält. Dies ist nur ein Alias, der auf data.on verweist.

Injektionen: Wenn die Option „Injizieren“ verwendet wird, enthält das Objekt Eigenschaften, die injiziert werden sollen.

Daten: Objekt, das alle vorherigen Eigenschaften enthält

Triggerereignis

Da die Funktionskomponente keine Instanz hat, stammt der Ereignis-Listener aus den context.listeners Property Parent, sodass der folgende Code zum Implementieren des Klickereignisses verwendet werden kann

Beispiel: Angenommen, es gibt eine App.vue-Komponente, in die FunctionalButton.js importiert werden kann, um sie in ihrer Vorlage zu verwenden

<template>
  <FunctionalButton>
    Click me
  </FunctionalButton></template>

export default {
  functional: true,
  render(createElement, { props, listeners, children }) {
    return createElement(
      'button',
      {
        attrs: props,
        on: {
          click: listeners.click
        }
      },
      children
    );
  }};

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein.

Das obige ist der detaillierte Inhalt vonFunktionskomponenten in Vue.js verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!