Ein Artikel, der Ihnen zeigt, wie Sie Vue-Komponenten erstellen und verwenden

1. Was ist eine Komponente?

Komponenten sind eine der leistungsstärksten Funktionen von Vue.js. Komponenten erweitern HTML-Elemente, um wiederverwendbaren Code zu kapseln. Auf einer hohen Ebene sind Komponenten benutzerdefinierte Elemente, denen der Vue.js-Compiler spezielle Funktionen hinzufügt.

2. Globale Komponenten erstellen

Methode 1

1. Vue.erweitern

       var com1 = Vue.extend({
// Die Vorlageneigenschaft gibt die HTML-Struktur an, die die Komponente anzeigen soll. Vorlage: „<h3>Dies ist eine mit Vue.extend erstellte Komponente</h3>“
            })

2. Vue.Komponente

Vue.component('Komponentenname', erstelltes Komponentenvorlagenobjekt) registriert die Komponente

  Vue.component('myCom1', com1)

Hinweis : Wenn Sie Vue.Component verwenden, um eine globale Komponente zu registrieren, und der Komponentenname in Camel Case vorliegt, müssen Sie beim Verweisen auf die Komponente die Großbuchstaben in Camel Case in Kleinbuchstaben ändern. Verwenden Sie gleichzeitig eine „–“-Verknüpfung zwischen zwei Wörtern. Wenn nicht verwendet, verwenden Sie einfach den Namen direkt.

Methode 2

Vue.component direkt verwenden

            Vue.component('mycom2', {
                Vorlage: '<div><h3>Dies ist eine Komponente, die direkt mit Vue.component erstellt wurde</h3>
<span>123</span></div>'
            })

Beispiel:

Methode 3

1. Verwenden Sie außerhalb der gesteuerten #app das Vorlagenelement, um die HTML-Vorlagenstruktur der Komponente zu definieren.

<Vorlagen-ID="tmpl">
            <div>
                <h1>Dies ist eine Komponentenstruktur, die extern durch das Vorlagenelement definiert wird</h1>
                <h4>Einfach zu bedienen, gut!</h4>
            </div>
        </Vorlage>

2. Komponenten mit ID registrieren

   Vue.component('mycom3', {
        Vorlage: „#tmpl“
    })

3. Lokale Komponenten erstellen

Lokale Komponenten werden auf die gleiche Weise erstellt wie globale Komponenten. Der einzige Unterschied besteht darin, dass Teilkomponenten innerhalb einer Vue-Instanz definiert werden.

4. Daten und Methoden in Komponenten

1. Komponenten können eigene Daten haben.

2. Die Daten in der Komponente unterscheiden sich geringfügig von den Daten in der Instanz. Die Daten in der Instanz können ein Objekt sein. Aber die Daten in der Komponente müssen eine Methode sein.

3. Die Daten in der Komponente müssen nicht nur eine Methode sein, sondern auch ein Objekt zurückgeben.

4. Die Daten in der Komponente werden auf die gleiche Weise verwendet wie die Daten in der Instanz. (Dasselbe gilt für Methoden)

5. Kommunikation zwischen Komponenten

Requisiten/$emit

Die übergeordnete Komponente A übergibt Eigenschaften an die untergeordnete Komponente B, und die Übertragung von B nach A wird in Komponente B durch $emit und in Komponente A durch v-on implementiert.

Unterkomponenten:

<Vorlage>
  <div Klasse="hallo">
    <ul>
      <li v-for="(Benutzer,index) in Benutzer" v-bind:key="index">{{ Benutzer }}</li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Benutzer",
  Requisiten: {
    Benutzer: { //Angepasster Name der untergeordneten Tags im übergeordneten Komponententyp: Array,
      erfordern: wahr
    }
  }
}
</Skript>

<Stilbereich>
 li{
   Listenstil-Position: innen;
 }
</Stil>

Übergeordnete Komponente:

<Vorlage>
  <div id="app">
    <img alt="Vue-Logo" src="./assets/logo.png">
    <Benutzer v-bind:users="Benutzer"> </Benutzer>
  </div>
</Vorlage>

<Skript>
Benutzer aus „@/components/users“ importieren;
Standard exportieren {
  Name: "App",
  Daten(){
    zurückkehren {
      Benutzer: ['Xi'an Post und Telekommunikation', 'Xi'an Petroleum', 'Politikwissenschaft und Recht des Nordwestens', 'Xi'an Industrie', 'Xi'an Finanzen']
    }
  },
  Komponenten:
    Benutzer,
  }
}
</Skript>

Nach Veranstaltungsformular

Unterkomponenten :

<Vorlage>
  <Kopfzeile>
    <h1 @click="changeTitle">{{ Titel }}</h1>
  </header>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Sohn",
  Daten(){
    zurückkehren {
      Titel: „Vue.js-Demo“
    }
  },
  Methoden: {
    Titel ändern(){
      this.$emit('titleChanged','Universität für Post und Telekommunikation Xi'an');
    }
  }
}
</Skript>

<Stilbereich>
 h1{
   Hintergrundfarbe: grüngelb;
 }
</Stil>

Übergeordnete Komponente:

<Vorlage>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ Titel }}</h2>
  </div>
</Vorlage>
<Skript>
importiere Son aus "@/components/Son";
Standard exportieren {
  Name: "Vater",
  Daten(){
    zurückkehren {
      Titel: „Was übergeben wird, ist ein Wert“
    }
  },
  Methoden: {
    updateTitel(e){
      dieser.Titel = e
    }
  },
  Komponenten: {
    Sohn,
  }
}
</Skript>

Zusammenfassen

Die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente, was eigentlich bedeutet, dass die untergeordnete Komponente ihre eigenen Daten an die übergeordnete Komponente sendet.

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