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

So fragen Sie Bilder in einem privaten Register ab oder erhalten sie

Docker fragt Bilder in einem privaten Register ab...

Installation von mysql-community-server.5.7.18-1.el6 unter centos 6.5

Verwenden Sie den folgenden Befehl, um zu überprü...

So kapseln Sie Axios in Vue

Inhaltsverzeichnis 1. Installation 1. Einleitung ...

So überwachen Sie globale Variablen im WeChat-Applet

Ich bin kürzlich bei der Arbeit auf ein Problem g...

Detaillierte Erläuterung der Nest.js-Parametervalidierung und des benutzerdefinierten Rückgabedatenformats

0x0 Parameterüberprüfung Der Großteil der Paramet...

Nginx implementiert ein Codebeispiel für die https-Websitekonfiguration

https-Basisport 443. Er wird für etwas verwendet,...

Vergleichstabelle chinesischer und englischer Schriftnamen (einschließlich Founder und Arphic)

In CSS-Dateien sehen wir oft, dass einige Schrift...

Zusammenfassung der Methoden zum Bereinigen von Mysql general_log

Methode 1: GLOBAL festlegen general_log = "A...

Benutzererfahrung bei der Neugestaltung der Portal-Website

<br />Vom Start der neuen Homepage von NetEa...

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Dieser Artikel stellt einige Aspekte von HTML-Tag...

CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10

Während Ubuntu heute das beliebteste Linux-Betrie...

Fehler beim reduzierten Tabellenzeilenelement

Nehmen wir ein Beispiel: Der Code ist sehr einfach...

Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert

Die Vue-Routing-Seite this.route.push wird nicht ...

So handhaben Sie Bilder in Vue-Formularen

Frage: Ich habe in Vue ein Formular zum Hochladen...

React führt antd-mobile+postcss ein, um ein mobiles Terminal zu erstellen

Installieren Sie antd-mobile Globaler Import npm ...