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 aura très probablement son propre modèle.

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