Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Vorwort

Man kann sagen, dass Slots ein sehr wichtiger Teil von Vue sind. Im Laufe meines Lernens und meiner Praxis habe ich festgestellt, dass Komponenten besser funktionieren, wenn sie zusammen mit Slots verwendet werden. Es wird in den meisten Fällen bequemer sein.

Heute werde ich drei Arten von Slots in Vue vorstellen: Standard-Slots, benannte Slots und bereichsbezogene Slots.

Umgebungsvorbereitung

Lassen Sie mich zunächst eine erste Umgebung einrichten, die für alle sichtbar ist. Lassen Sie uns Schritt für Schritt über diesen Slot sprechen.

Schreiben Sie einfach eine Kategoriekomponente, um diese drei Datentypen jeweils darzustellen.

Bild-20211120150949138

Kategorie Komponente

<Vorlage>
  <div Klasse="Kategorie">
    <h1>{{title}}</h1>
    <ul>
      <li 
      v-for="(Element, Index) in Listendaten"
      :Schlüssel="index">{{Artikel}}</li>
    </ul>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
    listData:Array,
    Titel: Zeichenfolge
  }
}
</Skript>
<Stilbereich>
.Kategorie{
  Breite: 200px;
  Höhe: 300px;
  Hintergrundfarbe: rosa;
}
</Stil>

App-Komponenten

<Vorlage>
  <div id="app">
    <Category :listData="Spiele" :title="'Spiele'" />
    <Category :listData="Filme" :title="'Filme'" />
    <Category :listData="Lebensmittel" :title="'Lebensmittel'" />
  </div>
</Vorlage>
<Skript>
Kategorie aus „./components/Category.vue“ importieren
Standard exportieren {
  Name: "App",
  Komponenten:
    Kategorie
  },
  Daten () {
    zurückkehren {
      Spiele:['Cross Fire','QQ Speed','Locke Kingdom'],
      Filme:['Hallo, Li Huanying','Jugend','Flüchtige Zeit'],
      Lebensmittel: ['Shaoyang-Reisnudeln', 'Changsha-Tee', 'Chongqing-Hot Pot']
    }
  }
}
</Skript>
<Stil>
#app {
  Schriftfamilie: Avenir, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
}
</Stil>

Die ursprüngliche Anforderung war wie im Bild oben dargestellt, aber jetzt haben sich die Geschäftsanforderungen geändert. Der Film macht nur Werbung für einen von ihnen, und die anderen werden nicht beworben. Das Essen macht auch nur Werbung für einen von ihnen.

Wie unten dargestellt:

Bild-20211120151432264

Wie machen wir es angemessen?

Fügen Sie der Kategoriekomponente if-Anweisungen hinzu, um Urteile einzeln zu fällen? Oder gibt es einen besseren Weg? ? ?

Es ist nicht möglich, ein Urteil nach dem anderen zu fällen, da der Code sehr kompliziert und schwer zu lesen wird. Falls die Geschäftsanforderungen in Zukunft geändert werden müssen, wird es schwierig sein, den Code zu ändern.

Schauen wir uns als Nächstes den Standardsteckplatz an.

1. Standard-Slots

Wir müssen keine Props mehr verwenden, um Daten zu empfangen oder in untergeordneten Komponenten zu rendern, sondern können stattdessen einen Slot definieren.

<Vorlage>
<div Klasse="Kategorie">
    <!-- Slot definieren, Slot-Standardinhalt -->
    <slot>Wenn die übergeordnete Komponente keinen Wert übergibt, wird dieser Standardwert angezeigt</slot>
    </div>
</Vorlage>
<Skript>
    Standard exportieren {
        Requisiten: {
        }
    }
</Skript>

Auch App-Komponenten haben sich geändert

<Vorlage>
<div id="app">
    <Kategorie>
        <h1>Spiele</h1>
        <!-- <ul>
<li v-for="(Artikel, Index) in Spielen" :key="index">{{ Artikel }}</li>
    </ul> -->
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e">
    </Kategorie>
    
    <Kategorie>
        <h1>Filme</h1>
        <img class="Filme" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f">
        <!-- <ul> -->
        <!-- <li v-for="(item, index) in movies" :key="index">{{ item }}</li> -->
        <!-- </ul> -->
    </Kategorie>
    <Kategorie>
        <h1>Lebensmittel</h1>
        <ul>
            <li v-for="(Artikel, Index) in Lebensmitteln" :key="index">{{ Artikel }}</li>
    </ul>
    </Kategorie>
    
    <!-- Sehen Sie, was angezeigt wird, wenn nichts geschrieben ist-->
    <Kategorie>
    </Kategorie>
    </div>
</Vorlage>
 
<Skript>
    Kategorie aus „./components/Category.vue“ importieren
 
    Standard exportieren {
        Name: "App",
        Komponenten:
            Kategorie
        },
        Daten () {
            zurückkehren {
                Spiele:['Cross Fire','QQ Speed','Locke Kingdom'],
                Filme:['Hallo, Li Huanying','Jugend','Flüchtige Zeit'],
                Lebensmittel: ['Shaoyang-Reisnudeln', 'Changsha-Tee', 'Chongqing-Hot Pot']
            }
        }
    }
</Skript>

Anzeigeeffekt:

Bild-20211120152024922

erklären:

Wir haben ein Tag <slot>Wenn die übergeordnete Komponente keinen Wert übergibt, zeige diesen Standard an</slot> in die untergeordnete Komponente geschrieben, was dem Einnehmen einer Position entspricht.

In der übergeordneten Komponente schreiben wir nicht mehr wie bisher selbstschließende und Tags mit der Aufschrift <Category/>, sondern nicht selbstschließende und Tags mit der Aufschrift <Category> content</Category>. Auf diese Weise rendert Vue standardmäßig den im Komponenten-Tag geschriebenen Inhalt und fügt ihn dann wieder in den <slot></slot> in der untergeordneten Komponente ein.

Hinweis: CSS-Stile können entweder in übergeordnete oder untergeordnete Komponenten geschrieben werden, da sie nach dem Rendern wieder in die untergeordneten Komponenten eingefügt werden. In einer untergeordneten Komponente geschrieben, wird es gerendert, wenn es wieder in die untergeordnete Komponente eingefügt wird.

Nachdem Sie dies geschrieben haben, hält der Kunde Sie plötzlich für überaus fähig, wird unzufrieden und beginnt erneut, Ihnen Ärger zu machen.

Bild-20211120152906020

Als Nächstes ist es an der Zeit, dass die benannten Slots erscheinen.

2. Benannte Slots

Da wir uns vorstellen können, einen Steckplatz zu verwenden, warum können wir nicht versuchen, zwei Steckplätze zu verwenden?

Transformieren von Unterkomponenten

<Vorlage>
  <div Klasse="Kategorie">
    <!-- Sie müssen der übergeordneten Komponente einen Namen hinzufügen, um anzugeben, in welchen Steckplatz sie eingefügt werden soll. Aus diesem Grund wird sie als benannter Steckplatz bezeichnet.--->
    <slot name="slot1">Wenn die übergeordnete Komponente keinen Wert übergibt, wird dieser Standardwert angezeigt</slot>
    <slot name="slot2"></slot>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
  }
}
</Skript>

Übergeordnete Komponente

<Vorlage>
	<div id="app">
    	<Kategorie>
       	 <Vorlagenslot="Steckplatz1">
          	  <h1>Spiele</h1>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e"
                 />
	</Vorlage>
	<Vorlage Slot="Slot2">
		<button >qq anmelden</button>
		<button >Mit WeChat anmelden</button>
	</Vorlage>
 
</Kategorie>
<Kategorie>
    <Vorlagenslot="Steckplatz1">
		<h1>Filme</h1>
			<Bild
     Klasse = "Filme"
     Quelle = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f"
     />
    </Vorlage>
    <Vorlage Slot="Slot2">
		<button >Klicken, um Tickets zu kaufen</button>
    </Vorlage>
</Kategorie>
 
<Kategorie>
    <Vorlagenslot="Steckplatz1">
		<h1>Lebensmittel</h1>
		<ul>
    		<li v-for="(Artikel, Index) in Lebensmitteln" :key="index">{{ Artikel }}</li>
        </ul>
    </Vorlage>
</Kategorie>
 
<!-- Sehen Sie, was angezeigt wird, wenn nichts geschrieben ist-->
<Kategorie> </Kategorie>
</div>
</Vorlage>
 
<Skript>
    Kategorie aus „./components/Category.vue“ importieren
 
    Standard exportieren {
        Name: "App",
        Komponenten:
            Kategorie
        },
        Daten () {
            zurückkehren {
                Spiele:['Cross Fire','QQ Speed','Locke Kingdom'],
                Filme:['Hallo, Li Huanying','Jugend','Flüchtige Zeit'],
                Lebensmittel: ['Shaoyang-Reisnudeln', 'Changsha-Tee', 'Chongqing-Hot Pot']
            }
        }
    }
</Skript>

Effektanzeige

Bild-20211120153500451

erklären:

Wir können in eine Komponente mehrere Slots einfügen, aber wenn mehrere Slots vorhanden sind, müssen sie in der übergeordneten Komponente benannt und angegeben werden, damit sie nicht fehlen.

3. Slots mit begrenztem Umfang

Scoped Slots unterscheiden sich geringfügig von den vorherigen. Zuvor befanden sich die Daten in der übergeordneten Komponente, während Scoped Slots sich in der untergeordneten Komponente befinden, die wiederum an die übergeordnete Komponente übergeben wird, sodass die übergeordnete Komponente die Struktur für das Rendering definieren kann.

Geänderte Unterkomponenten

<Vorlage>
  <div Klasse="Kategorie">
    <slot name="slot1">Wenn die übergeordnete Komponente keinen Wert übergibt, wird dieser Standardwert angezeigt</slot>
    <slot name="slot2" :foods="foods">Wenn die übergeordnete Komponente keinen Wert übergibt, wird dieser Standardwert angezeigt</slot>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Lebensmittel: ['Shaoyang-Reisnudeln', 'Changsha-Tee', 'Chongqing-Hot Pot']
    }
  }
}
</Skript>

Übergeordnete Komponente

<Vorlage>
  <div id="app">
    <Kategorie>
      <Vorlagenslot="Steckplatz1">
        <h1>Lebensmittel</h1>
      </Vorlage>
      <template slot="slot2" scope="listData">
        <!--Wenn Sie es nicht wissen, können wir ausgeben, was das ist. {{listData}} -->
        <ul>
          <li v-for="(Artikel, Index) in listData.foods" :key="index">
            {{ Artikel }}
          </li>
        </ul>
      </Vorlage>
    </Kategorie>
    <Kategorie>
      <Vorlagenslot="Steckplatz1">
        <h1>Lebensmittel</h1>
      </Vorlage>
      <template slot="slot2" scope="listData">
        <ol>
          <li v-for="(Artikel, Index) in listData.foods" :key="index">
            {{ Artikel }}
          </li>
        </ol>
      </Vorlage>
    </Kategorie>
    <Kategorie>
      <Vorlagenslot="Steckplatz1">
        <h1>Lebensmittel</h1>
      </Vorlage>
      <template slot="slot2" scope="listData">
          <h4 v-for="(Artikel, Index) in Listendaten.Lebensmittel" :Schlüssel="Index">
            {{ Artikel }}
          </h4>
      </Vorlage>
    </Kategorie>
    <Kategorie>
      <template slot="slot1" scope="listData">	
{{listData}}
      </Vorlage>
    </Kategorie>
  </div>
</Vorlage>
 
<Skript>
Kategorie aus „./components/Category.vue“ importieren
 
Standard exportieren {
  Name: "App",
  Komponenten:
    Kategorie
  }
}
</Skript>

Rendern

Bild-20211120154438477

Während meiner Ausbildung und Praxis habe ich an keine Anwendungsszenarien für derartige Dinge gedacht, aber auf der offiziellen Website gibt es Beispiele. Ich denke, es muss einen Grund für die Existenz geben, aber ich habe einfach nicht genug Wissen und konnte es nicht nutzen.

erklären:

Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente durch: Variablenname = „definierte Daten“, und die übergeordnete Komponente empfängt ihn mit <template slot = „slot2“ scope = „verwenden Sie nicht denselben Namen wie den von der untergeordneten Komponente übergebenen Namen">, da es noch eine weitere Ebene gibt, bevor sie erreicht wird

<template slot="slot2" scope="listData">
<!--Wenn Sie es nicht wissen, können wir ausgeben, was das ist. {{listData}} -->
<ul>
    <li v-for="(Artikel, Index) in listData.foods" :key="index">
        {{ Artikel }}
    </li>
    </ul>
</Vorlage>

Zusammenfassen

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

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der sieben Komponentenkommunikationsmethoden von Vue3
  • Details zu 7 Arten der Komponentenkommunikation in Vue3
  • Fallzusammenfassung zur Vue-Komponentenkommunikationsmethode
  • Acht Beispiele, wie Vue Komponentenkommunikation implementiert
  • Detaillierte Erklärung der Komponentenkommunikation in Vue (Vater-Kind-Komponente, Großvater-Enkel-Komponente, Bruder-Komponente)
  • Mehrere Möglichkeiten der Kommunikation zwischen Vue-Komponenten

<<:  Einführung in HTML-Link-Ankertags und ihre Rolle bei der Suchmaschinenoptimierung

>>:  So optimieren Sie eine Website, um die Zugriffsgeschwindigkeit zu erhöhen Update

Artikel empfehlen

Mehrere gängige Methoden zum Senden von Anfragen mit Axios in React

Inhaltsverzeichnis Installieren und Einführen von...

Lösung für das Problem des wiederholten Auftauchens des Nachrichten-Popup-Fensters von Element

Inhaltsverzeichnis 1. Verwendung 2. Lösen Sie das...

Detaillierte Erklärung zur Verwendung von Element-Plus in Vue3

Inhaltsverzeichnis 1. Installation 2. Importieren...

Zeigen Sie die vom Prozess in Linux belegte Portnummer an

Für Linux-Systemadministratoren ist es von entsch...

js, um die vollständigen Schritte der Konvertierung von Chinesisch nach Pinyin durchzuführen

Ich habe js verwendet, um ein Paket zur Konvertie...

MySQL 5.6.33 Installations- und Konfigurations-Tutorial unter Linux

In diesem Tutorial erfahren Sie alles über die In...

4 Prinzipien für sauberes und schönes Webdesign

In diesem Artikel werden diese 4 Prinzipien im Hi...

mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums

mysql erhält statistische Daten innerhalb eines b...

So deaktivieren Sie Anzeigen in der Terminal-Willkommensnachricht in Ubuntu Server

Wenn Sie die neueste Ubuntu Server-Version verwen...

Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)

1. Das Konzept von CSS: (Cascading Style Sheet) V...

So implementieren Sie E-Mail-Benachrichtigungen in Zabbix

Umgesetzt gemäß Online-Tutorial. zabbix3.4, mithi...

Diskussion über die numerische Begrenzung des OL-Elements im HTML-Dokument

Im Allgemeinen ist es unwahrscheinlich, dass Sie ...

Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung

Vue-Komponenten sind verbunden, daher ist es unve...

Lassen Sie uns über mein Verständnis und meine Anwendung von React Context sprechen

Inhaltsverzeichnis Vorwort Erster Blick auf React...

Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse

Warum sind die von Ihnen geschriebenen SQL-Abfrag...