Explication détaillée des étapes d'utilisation des emplacements pour distribuer du contenu à l'aide des composants vue

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation des slots pour distribuer du contenu dans les composants vue. Quelles sont les précautions pour utiliser les slots pour distribuer du contenu dans les composants vue. Voici des cas pratiques, 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 aura très probablement son propre modèle. Les

les accessoires transmettent des données, les événements déclenchent les événements et la distribution du contenu des emplacements 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
  }
});

Le stateshowChild 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 portée du contenu distribué par slot se situe sur le composant parent.

3. Utilisation des emplacements

3.1 Un seul emplacement

Utiliser des emplacements spéciaux dans les sous- composants L'élément peut ouvrir un emplacement (slot) pour ce composant enfant. Dans le modèle de composant parent, tout le contenu inséré dans la balise du composant enfant remplacera la balise

 <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 défini dans le modèle du sous-composant child-component , et un

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 sera remplacé.

3.2 Emplacement nommé

Après avoir attribué un nom à l'élément , plusieurs contenus peuvent être distribués et l'emplacement nommé peut coexister avec un seul emplacement.

  <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'
});

Le résultat du rendu est :                                                                                                                                                                                                         Si l'attribut name n'est pas utilisé, il apparaîtra comme le slot par défaut. Les éléments et le contenu du composant parent qui n'utilisent pas l'attribut slot apparaîtront ici

Si l'emplacement anonyme par défaut n'est pas spécifié, les fragments de contenu redondants dans le composant parent apparaîtront ici. Seront supprimés

 <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>

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 : 

Observez le modèle du. sous-composant, il existe une manière similaire d'écrire des accessoires pour transmettre des données au composant sur l'élément =" xxx ", les données sont transmises au composant parent

.

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!