Maison > Article > interface Web > vue+slot distribue du contenu
Cette fois, je vais vous présenter le contenu de la distribution vue+slot. Quelles sont les précautions à prendre pour le contenu de la distribution vue+slot ? Voici un cas pratique, jetons un coup d'oeil.
1. Qu'est-ce qu'un slot
Lorsque nous utilisons des composants, nous devons souvent les combiner comme ceci :
<app> <app-header></app-header> <app-footer></app-footer> </app>
Lorsque les composants doivent être utilisés en combinaison et mélanger le contenu du composant parent et le modèle du composant enfant, des slots seront utilisés. Ce processus est appelé distribution de contenu (transclusion).
Notez deux points :
1. Le composant
2. Le composant
Les accessoires transmettant des données, les événements déclenchant des événements et la distribution du contenu des slots constituent les trois sources API des composants Vue. Quelle que soit la complexité du composant, il est également composé de ces trois parties.
2. Portée
<child-component> {{ message }} </child-component>
Le message ici est un slot, mais il est lié aux données du composant parent, et Ce ne sont pas les données du composant
Le contenu du modèle de composant parent est compilé dans la portée du composant parent et le contenu du modèle de composant enfant est compilé dans la portée du composant enfant. Par exemple :
<p id="app15"> <child-component v-show="showChild"></child-component> </p> Vue.component('child-component',{ template: '<p>子组件</p>' }); var app15 = new Vue({ el: '#app15', data: { showChild: true } });
L'état showChild ici est lié aux données du composant parent. Si vous souhaitez le lier au composant enfant, il doit être :
<p id="app15"> <child-component></child-component> </p> Vue.component('child-component',{ template: '<p v-show="showChild">子组件</p>', data: function(){ return { showChild: true } } });
. Par conséquent, la distribution des emplacements Le contenu est limité au composant parent.
3. Utilisation des emplacements
3.1 Un seul emplacement
Utiliser des emplacements spéciaux dans les sous- composants L'élément
<p id="app16"> <my-component16> <p>分发的内容</p> <p>更多分发的内容</p> </my-component16> </p> Vue.component('my-component16',{ template: '<p>' + '<slot><p>如果父组件没有插入内容,我将作为默认出现<</p></slot>' + //预留的slot插槽 '</p>' }); var app16 = new Vue({ el: '#app16' });
Le résultat du rendu est :
<p id=”app16”> <p> <p>分发的内容<p> <p>更多分发的内容<p> </p> </p>
Un élément est utilisé par défaut contenu. Lorsque le composant parent n'utilise pas slot, ce texte par défaut sera rendu ; si slot est écrit, l'intégralité du 3.2 Emplacement nommé Après avoir attribué un nom à l'élément Le résultat du rendu est : Si l'attribut name n'est pas utilisé, il apparaîtra comme emplacement par défaut. Les éléments et le contenu du composant parent qui n'utilisent pas l'attribut slot apparaîtront ici 4. Emplacement de portée . L'emplacement de portée est un emplacement spécial qui peut être réutilisé. Remplacez l'élément rendu par le modèle Regardez un exemple : Les éléments à l'intérieur sont les mêmes. Les messages de données de l'emplacement du sous-composant sont accessibles via les accessoires de variable temporaire dans. le modèle Rendre principalement le composant plus évolutif <.>1. Utilisez un emplacement anonyme 2. Ajoutez un nom à l'emplacement Si vous ne le faites pas. Si vous n'ajoutez aucune balise au composant avec slot, rien ne sera affiché dans le slot Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée : child-component
, et un <p id="app17">
<my-component17>
<h3 slot="header">标题</h3>
<p>正文内容</p>
<p>更多正文内容</p>
<h3 slot="footer">底部信息</h3>
</my-component17>
</p>
Vue.component('my-component17',{
template: '<p class="container">' +
'<p class="header">' +
'<slot name="header"></slot>' +
'</p>' +
'<p class="main">' +
'<slot></slot>' +
'</p>'+
'<p class="footer">' +
'<slot name="footer"></slot>' +
'</p>'+
'</p>'
});
var app17 = new Vue({
el: '#app17'
});
<p id="app17">
<p class="container">
<p class="header">
<h3>标题</h3></p>
<p class="main">
<p>正文内容</p>
<p>更多正文内容</p>
</p>
<p class="footer">
<h3>底部信息</h3>
</p>
</p>
</p>
<p id="app18">
<my-component18>
<template scope="props">
<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
</template>
</my-component18>
</p>
Vue.component('my-component18',{
template: '<p class="container"><slot msg="来自子组件的内容"></slot></p>'
});
var app18 = new Vue({
el: '#app18'
});
. Les accessoires ici ne sont que des variables temporaires, tout comme scope=”props ”
v-for= ” item in items
Jetons un coup d'œil à l'utilisation du slot dans le composant Vue
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!