Maison > Article > interface Web > 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='text'/>
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='text'/>
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='header'></slot> </header>
Composant parent
<he> <h1 name='header'>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
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!