Warum werden Slots in Unterkomponenten verwendet?

Dieses Mal werde ich Ihnen erklären, warum Slots in Unterkomponenten verwendet werden und welche Vorsichtsmaßnahmen für die Verwendung von Slot-Unterkomponenten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Slot-Szenario 1 verwenden:

Unterkomponente Minput.vue

<input type=&#39;text&#39;/>

Übergeordnete Komponente Minput

<Minput>可以显示吗</Minput>

In diesem Fall innerhalb des Minput tag Der Text wird nicht gerendert

Was ist, wenn Sie den darin enthaltenen Text jetzt rendern möchten

Einfach zu verwendender Slot

Unterkomponente

<input type=&#39;text&#39;/>

In In diesem Fall kann der Text innerhalb der übergeordneten Komponente gerendert werden

Szenario 2: Benannter Slot

Untergeordnete Komponente he.vue

<header>
    <slot name=&#39;header&#39;></slot>
</header>

Übergeordnete Komponente

<he>
    <h1 name=&#39;header&#39;>hello world</h1>
</he>

Das gerenderte Ergebnis ist

<header><h1>hello world</h1></header>

Szene 3

Untergeordnete Komponente untergeordnet

<div>
    <h1>这是h1</h1>
    <slot>这是分发内容,只有在没有分发内容的情况下显示</slot>
</div>

Übergeordnete Komponente

<child>
    <p>这是一段p</p>
    <p>两段p</p>
</child>

Das Rendering ist

<div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>

Wenn die übergeordnete Komponente

<child></child>

ist, dann ist das Rendering

<div><h1>这是h1</h1>这是分发内容，只有在没有分发内容的情况下显示</div>

Szenario 4: Scope-Slot

<div class="child">
  <slot text="hello from child"></slot>
</div>

Übergeordnete Komponente

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

x-Rendering ist

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Weitere spannende Inhalte finden Sie auf anderen verwandten chinesischen PHP-Websites Artikel!

Verwandte Lektüre:

Wie man einen „Punkt“-Rand erscheinen lässt, nachdem man auf eine Schaltfläche geklickt hat

Ausführliche Erklärung des Browser-Rendering-Prozess

So stellen Sie sicher, dass das Eingabetextfeld automatisch vertikal zentriert wird und standardmäßig den IMG-Bestätigungscode verwendet

Klicken Sie auf den Eingabeaufforderungstext, um ihn leer zu lassen

Das obige ist der detaillierte Inhalt vonWarum werden Slots in Unterkomponenten verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!