Details zur Verwendung des Vue-Slots

1. Warum Slots verwenden?

1.1 Steckplatz

• Steckplätze gibt es an vielen Stellen im Leben, beispielsweise als USB-Steckplätze im Computer oder als Stromsteckplätze in Steckdosenleisten.
• Der Zweck des Steckplatzes besteht darin, unsere Originalausrüstung erweiterbarer zu machen
• Beispielsweise können wir USB-Sticks, Mobiltelefone, Mäuse, Tastaturen usw. an USB des Computers anschließen.
  

1.2 Steckplätze in Komponenten

• Die Komponentensteckplätze dienen auch dazu, unsere Komponenten erweiterbarer zu machen
• Lassen Sie den Benutzer entscheiden, was innerhalb der Komponente angezeigt werden soll
  

1.3 Beispiele

• In der mobilen Entwicklung hat fast jede Seite eine Navigationsleiste
• Wir müssen die Navigationsleiste in ein Plug-In packen
• Sobald wir diese Komponente haben, können wir sie auf mehreren Seiten wiederverwenden
  

2. So kapseln Sie solche Komponenten (Slot)

• Die beste Möglichkeit zur Kapselung besteht darin, Gemeinsamkeiten in Komponenten zu extrahieren und unterschiedliche Teile als Steckplätze freizulegen.
• Sobald wir einen Steckplatz reserviert haben, können wir den Benutzer je nach Bedarf entscheiden lassen, was er in den Steckplatz einfügt.
• Es handelt sich um ein Suchfeld, einen Text oder eine Schaltfläche. Die Entscheidung liegt beim Planer.
  

3. Steckplatzgehäuse

<div id="app">
  <cpn><button>Schaltfläche</button></cpn>
  <cpn><p>Hallo Welt</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<Vorlagen-ID="cpn">
  <div>
    <h2>Ich bin eine Komponente</h2>
    // Der Slot ist für Benutzer reserviert, die ihn ausfüllen möchten <slot></slot>
  </div>
</Vorlage>
<script src="../js/vue.js"></script>
<Skript>
  const app = new Vue({
    el: "#app",
    Komponenten:
      "cpn": {
        Vorlage: `#cpn`,
      }
    }
  })
</Skript>

Der obige Code bewirkt Folgendes:

• 1. Definieren Sie die Unterkomponente cpn , reservieren Sie dann einen Steckplatz in der Unterkomponente und füllen Sie den Inhalt des Steckplatzes durch den Benutzer aus.
• 2. Die übergeordnete Komponente verwendet die untergeordnete Komponente dreimal, und die drei untergeordneten Komponenten füllen die Slots mit unterschiedlichem Inhalt aus.

Der endgültige Anzeigeeffekt ist wie folgt:

4. Slot-Standardwerte

Wenn wir diese Komponente häufig verwenden müssen und die meisten der von der Komponente reservierten Slots mit Zurück-Schaltflächen und nur wenige mit anderen Schaltflächen belegt sind, können Sie in diesem Fall einen Standardwert für den Slot festlegen

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<Vorlagen-ID="cpn">
  <div>
    <slot><button>Zurück</button></slot>
  </div>
</Vorlage>

Wir setzen einen Slot mit einem Standardwert der Zurück-Schaltfläche in der untergeordneten Komponente. Wenn die übergeordnete Komponente bei ihrer Verwendung nichts ausfüllt, ist der Standardwert die Zurück-Schaltfläche.

5. Benannte Slots

Manchmal benötigen wir mehr als einen Slot. Beispielsweise für eine Komponente mit der folgenden Vorlage:

<Vorlagen-ID="cpn">
  <div>
    <span>Kopfzeile</span></slot>
    <span>Mitte</span></slot>
    <span>Fußzeile</span></slot>
  </div>
</Vorlage>

Wir haben drei Slots in der Komponente reserviert, aber hier geben wir drei Namen an. Die nachfolgende übergeordnete Komponente kann ihren eigenen Inhalt ausfüllen, nachdem sie v-slot verwendet hat, um name anzugeben, beispielsweise den folgenden Code

<div id="app">
  <cpn>
    <Vorlage v-slot:header>
      <p>Kopfzeile</p>
    </Vorlage>
    <Vorlage v-slot:footer>
      <p>Fußzeile</p>
    </Vorlage>
  </cpn>
</div>

cpn Komponente wird verwendet und dann wird das Slot name Attribut als Inhalt von header und footer angegeben. Nach der Angabe ersetzt der von Ihnen eingegebene Inhalt den Standardinhalt.

Hinweis: Das Syntaxformat ist hier festgelegt und Sie müssen den v-slot: Slot-Namen binden, wenn Sie das Vorlagentag verwenden.

6. Umfang der Kompilierung

Von außen an die Komponente übergebene Variablen können bei späterer Verwendung des Slots nicht mehr verwendet werden

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<Vorlagen-ID="cpn">
  <p>Hallo</p>
</Vorlage>
<script src="../js/vue.js"></script>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      isShow: true
    },
    Komponenten:
      "cpn": {
        Vorlage: `#cpn`,
        Daten(){
          zurückkehren {
            isShow: false
          }
        }
      }
    }
  })
</Skript>

Oben haben wir die Unterkomponente cpn definiert, die das Attribut isShow hat. Das Attribut isShow ist auch in app Instanz definiert. Schließlich wird bei Verwendung der Unterkomponente cpn v- show verwendet. Wenn der Wert true ist, wird es angezeigt, und wenn der Wert false ist, wird es nicht angezeigt.
Frage: Ist der Wert von isShow in v-show in der Instanz „true“ oder in der untergeordneten Komponente „false“?
Antwort: Das stimmt, denn Sie verwenden es im Rahmen der App-Instanz, sodass isShow es in data der Instanz sucht. Obwohl Sie es in cpn Unterkomponente binden, müssen Sie das CPN hier nur als normales Tag behandeln. Wenn der Wert von isShow false soll, müssen Sie in der template der Unterkomponente nur <p v-show="isShow">hello</p>
verwenden. <p v-show="isShow">hello</p>


7. Slots mit begrenztem Umfang

Standardmäßig kann der Code im Slot nur die Eigenschaften im globalen Vue verwenden. Wenn Sie die Eigenschaften in einer benutzerdefinierten Komponente verwenden möchten, müssen Sie beim Definieren slot v-bind zum Binden verwenden.

<div id="app">
  <cpn>
    <template v-slot:default="Steckplatz">
      {{slot.data.firstName}}
    </Vorlage>
  </cpn>
</div>
<Vorlagen-ID="cpn">
  <div>
    <slot :data="Benutzer">
      {{Benutzer.Nachname}}
    </slot>
  </div>
</Vorlage>
<script src="../js/vue.js"></script>
<Skript>
  const app = new Vue({
    el: "#app",
    Komponenten:
      "cpn": {
        Vorlage: `#cpn`,
        Daten(){
          zurückkehren {
            "Benutzer": {
              "Vorname": "Vorname",
              "Nachname": "Muschelwurm"
            }
          }
        }
      }
    }
  })
</Skript>

Der obige Code bewirkt Folgendes:

• 1. Definieren Sie die Unterkomponente cpn und definieren Sie user in der Unterkomponente
• 2. Die data sind an den Steckplatz der Unterkomponenten-CPN-Vorlage gebunden, und der Standardwert des Steckplatzes ist user.lastname

• 3. Die Unterkomponente wird in html verwendet, und das Slot- Prop Objekt wird mithilfe von v-slot gebunden, sodass auf die Daten in der Unterkomponente über den Objektnamen zugegriffen werden kann. Der in der Unterkomponente gebundene Eigenschaftsname ( slot.data )

Dies ist das Ende dieses Artikels über die Einzelheiten zur Verwendung des Vue-Slots. Weitere Informationen zur Verwendung des Vue-Slots finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!