Explication détaillée des étapes de distribution du contenu des machines à sous

Cette fois, je vais vous donner une explication détaillée des étapes de distribution du contenu des slots. Quelles sont les précautions pour la distribution du contenu des slots. 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 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 pour ce sous-composant. Dans le modèle de composant parent, tout le contenu inséré dans la balise du sous-composant remplacera la balise du sous-composant.

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