Vue-Komponenten Dynamische Komponenten detaillierte Erklärung

Vue-Komponenten Dynamische Komponenten detaillierte Erklärung

Wenn sich das Array ändert, laden Sie die entsprechenden Daten dynamisch

Szenario : Klicken Sie auf verschiedene Komponentennamen und die Schnittstelle zeigt die entsprechenden Komponenten an

Schritt 1 : Erforderliche Komponenten importieren

Schritt 2 : Klicken Sie auf die Registerkarte und fügen Sie den entsprechenden Komponentennamen in das Array ein

Schritt 3 : Verwenden Sie dynamische Komponenten und binden Sie das Attribut :is an den Komponentennamen

<div v-for="(Element, Index) in Komponentendaten" :Schlüssel="Index">
  <Komponenten: ist = "Element.Komponentenname"/>
</div>

Beispiel : Überwachung von Eigenschaftsänderungen in einem Objekt, gründliche Überwachung

<!-- DynamicComponent.vue -->
<Vorlage>
  <Abschnitt>
    <div v-for="(Element, Index) in Komponentendaten" :Schlüssel="Index">
      <Komponenten :is='Element.Komponentenname' :params="Element.Inhalt" />
    </div>
  </Abschnitt>
</Vorlage>
<Skript>
importiere PageOne aus './pageComponents/PageOne'
importiere PageTwo aus './pageComponents/PageTwo'
importiere PageThree aus './pageComponents/PageThree'
Standard exportieren{
  Name: "DynamischeKomponente",
  Komponenten:
    Seite Eins,
    Seite Zwei,
    Seite Drei
  },
  Daten () {
    zurückkehren {
      Komponentendaten: [
        {
          Komponentenname: "SeiteEins",
          Inhalt: {
            Titel: „Titel 1“
          }
        },
        {
          Komponentenname: 'SeiteZwei',
          Inhalt: {
            Titel: „Titel 2“
          }
        }
      ]
    }
  }
}
</Skript>
<!-- SeiteEins -->
<Vorlage>
  <Abschnitt>
    {{Inhalt}}
  </Abschnitt>
</Vorlage>
<Skript>
Standard exportieren{
  Name: 'SeiteEins',
  Requisiten: {
    Parameter: {
      Typ: Objekt,
      Standard: Funktion(){
        zurückkehren {}
      }
    }
  },
  Daten () {
    zurückkehren {
      Inhalt: this.params.title
    }
  },
  betrachten:
    Parameter: {
      handler(neuerWert, alterWert){
        dieser.Inhalt = neuerWert.Titel
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>
<!-- SeiteZwei -->
<Vorlage>
  <Abschnitt>
    {{Inhalt}}
  </Abschnitt>
</Vorlage>
<Skript>
Standard exportieren{
  Name: 'SeiteZwei',
  Requisiten: {
    Parameter: {
      Typ: Objekt,
      Standard: Funktion(){
        zurückkehren {}
      }
    }
  },
  Daten () {
    zurückkehren {
      Inhalt: this.params.title
    }
  },
  betrachten:
    Parameter: {
      handler(neuerWert, alterWert){
        dieser.Inhalt = neuerWert.Titel
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Wenn sich das Array ändert, laden Sie die entsprechenden Daten dynamisch

Szenario : Klicken Sie auf verschiedene Komponentennamen und die Schnittstelle zeigt die entsprechenden Komponenten an

Schritt 1 : Erforderliche Komponenten importieren

Schritt 2 : Klicken Sie auf die Registerkarte und fügen Sie den entsprechenden Komponentennamen in das Array ein

Schritt 3 : Verwenden Sie dynamische Komponenten und binden Sie das Attribut :is an den Komponentennamen

<div v-for="(Element, Index) in Komponentendaten" :Schlüssel="Index">
  <Komponenten: ist = "Element.Komponentenname"/>
</div>

Beispiel : Überwachung von Eigenschaftsänderungen in einem Objekt, gründliche Überwachung

<!-- DynamicComponent.vue -->
<Vorlage>
  <Abschnitt>
    <div v-for="(Element, Index) in Komponentendaten" :Schlüssel="Index">
      <Komponenten :is='Element.Komponentenname' :params="Element.Inhalt" />
    </div>
  </Abschnitt>
</Vorlage>
<Skript>
importiere PageOne aus './pageComponents/PageOne'
importiere PageTwo aus './pageComponents/PageTwo'
importiere PageThree aus './pageComponents/PageThree'
Standard exportieren{
  Name: "DynamischeKomponente",
  Komponenten:
    Seite Eins,
    Seite Zwei,
    Seite Drei
  },
  Daten () {
    zurückkehren {
      Komponentendaten: [
        {
          Komponentenname: "SeiteEins",
          Inhalt: {
            Titel: „Titel 1“
          }
        },
        {
          Komponentenname: 'SeiteZwei',
          Inhalt: {
            Titel: „Titel 2“
          }
        }
      ]
    }
  }
}
</Skript>
<!-- SeiteEins -->
<Vorlage>
  <Abschnitt>
    {{Inhalt}}
  </Abschnitt>
</Vorlage>
<Skript>
Standard exportieren{
  Name: 'SeiteEins',
  Requisiten: {
    Parameter: {
      Typ: Objekt,
      Standard: Funktion(){
        zurückkehren {}
      }
    }
  },
  Daten () {
    zurückkehren {
      Inhalt: this.params.title
    }
  },
  betrachten:
    Parameter: {
      handler(neuerWert, alterWert){
        dieser.Inhalt = neuerWert.Titel
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>
<!-- SeiteZwei -->
<Vorlage>
  <Abschnitt>
    {{Inhalt}}
  </Abschnitt>
</Vorlage>
<Skript>
Standard exportieren{
  Name: 'SeiteZwei',
  Requisiten: {
    Parameter: {
      Typ: Objekt,
      Standard: Funktion(){
        zurückkehren {}
      }
    }
  },
  Daten () {
    zurückkehren {
      Inhalt: this.params.title
    }
  },
  betrachten:
    Parameter: {
      handler(neuerWert, alterWert){
        dieser.Inhalt = neuerWert.Titel
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Integrierte Vue-Komponente - dynamisches Rendern von Komponentenoperationen über das is-Attribut
  • Beschreibung der Vue.component-Eigenschaft
  • Detaillierte Erklärung der Beziehung zwischen Vue und VueComponent
  • Dynamische Vue-Komponente
  • Lösen Sie das Komponenten-Tag-Rendering-Problem von Vue

<<:  Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

>>:  Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)

Artikel empfehlen

Sprechen Sie kurz über MySQL Left Join Inner Join

Vorwort Ich war kürzlich damit beschäftigt, ein K...

So beheben Sie den PyCurl-Fehler unter Linux

Lösung für „Curl-config konnte nicht ausgeführt w...

Eine kurze Erläuterung der Anzeigemodi von HTML-Tags (Tags auf Blockebene, Inline-Tags, Inline-Block-Tags)

Während der heutigen Vorlesung habe ich über den ...

Implementierung mehrerer Tomcat-Instanzen auf einer einzigen Maschine

1. Einleitung Zunächst müssen wir eine Frage bean...

MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...

Der grundlegendste Code für Webseiten

◆Zu Favoriten hinzufügen veranschaulichen Klicken...

Detaillierte Erläuterung des MySQL 5.7.9-Shutdown-Syntaxbeispiels

mysql-5.7.9 bietet endlich eine Shutdown-Syntax: ...

Lösung für MySql-Fehler 1698 (28000)

1. Problembeschreibung: MysqlERROR1698 (28000)-Lö...

So verwenden Sie Docker zum Erstellen benutzerdefinierter Images auf Unternehmensebene

Vorwort Vor Feierabend erhielt der Autor eine Anf...

Implementierung der Ausführung von SQL Server mit Docker

Jetzt ist .net Core plattformübergreifend und jed...

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Viele Freunde, die gerade angefangen haben, Websei...

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

mktemp Erstellen Sie auf sichere Weise temporäre ...

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Postfix ist ein kostenloser und quelloffener MTA ...

Kopieren und Einfügen ist der Feind der Verpackung

Bevor wir über OO, Entwurfsmuster und die vielen o...

Detaillierte Erklärung der Verwendung der MySQL-Transaktionsverarbeitung und Beispielcode

Die MySQL-Transaktionsunterstützung ist nicht an ...