Pourquoi les emplacements sont-ils utilisés dans les sous-composants ?

Cette fois, je vais vous expliquer pourquoi les slots sont utilisés dans les sous-composants et quelles sont les précautions d'utilisation des sous-composants de slot. Ce qui suit est un cas pratique, jetons un coup d'œil.

Utiliser le scénario de slot 1 :

Sous-composant Minput.vue

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

Composant parent Minput

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

Dans ce cas, au sein du Minput tag Le texte ne sera pas rendu

Et si vous souhaitez rendre le texte à l'intérieur maintenant

Fente facile à utiliser

Sous-composant

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

Dans dans ce cas, le texte à l'intérieur du composant parent peut être rendu

Scénario 2 : Emplacement nommé

Composant enfant he.vue

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

Composant parent

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

Le résultat rendu est

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

Scène 3

Composant enfant enfant

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

Composant parent

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

Le rendu est

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

Si le composant parent est

<child></child>

alors le rendu est

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

Scénario 4 : Emplacement de portée

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

Composant parent

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

Le rendu x est

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

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez faire attention aux autres sites Web chinois php connexes. des articles !

Lecture connexe :

Comment faire apparaître une bordure en "points" après avoir cliqué sur un bouton

Explication détaillée du processus de rendu du navigateur

Comment faire en sorte que la zone de texte de saisie soit automatiquement centrée verticalement et par défaut sur le code de vérification img

Cliquez sur le texte d'invite pour qu'il soit vide

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!