Pourquoi utiliser le slot scope de vue ? Quand l'utiliser ?

Cet article vous donnera une compréhension détaillée du slot de portée de vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les emplacements Vue sont un excellent moyen d'injecter du contenu d'un composant parent dans un composant enfant. (Partage de vidéos d'apprentissage : tutoriel vidéo vue)

Ce qui suit est un exemple de base Si nous ne fournissons aucun slot contenu du parent, ajoutez-le simplement au parent Le contenu sera utilisé comme contenu de sauvegarde. <slot></slot>

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

Puis dans notre composant parent :

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

Une fois compilé, notre DOM ressemblera à ceci.

<div> Override fallback content </div>

Nous pouvons également envelopper toutes les données de la portée parent dans du contenu

. Donc si notre composant a un champ de données nommé slot, nous pouvons facilement l'ajouter comme ceci. name

<template>
   <child-component>
      {{ text }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

[Recommandations associées :

Tutoriel vue.js]

Pourquoi avons-nous besoin d'emplacements de portée

Regardons un autre exemple, en supposant que nous ayons un composant

et ArticleHeader contient des informations sur l'article. data

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

Regardons de plus près le contenu

, le contenu de secours restitue slot. info.title

Nous pouvons facilement implémenter ce composant comme celui-ci sans modifier le contenu de secours par défaut.

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

Dans le navigateur,

sera affiché. title

Bien que nous puissions modifier rapidement le contenu d'un emplacement en ajoutant une expression de modèle à l'emplacement, si nous voulons effectuer un rendu à partir d'un composant enfant

, que va-t-il se passer ?info.description

Nous voulons le faire de la manière suivante :

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

Cependant, après avoir exécuté de cette façon, une erreur sera signalée :

. TypeError: Cannot read property ‘description’ of undefined

C'est parce que notre composant parent ne sait pas ce qu'est cet

objet. info

Alors, comment pouvons-nous le résoudre ?

Présentation des slots scoped

En bref, les slots scoped permettent au contenu des slots de notre composant parent d'accéder aux données trouvées uniquement dans les composants enfants. Par exemple, nous pouvons utiliser des emplacements limités pour accorder aux composants parents l'accès à . info

Nous avons besoin de deux étapes pour ce faire :

Utilisez
• pour rendre le contenu v-bind disponible en utilisant slotinfo
dans le rôle parent Utiliser
• dans le domaine pour accéder aux propriétés v-slot slot

Tout d'abord, afin de rendre

disponible à l'objet parent, nous pouvons lier l'objet info en tant que propriété sur l'emplacement . Ces propriétés délimitées sont appelées infoaccessoires de slot.

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

Ensuite, dans notre composant parent, nous pouvons utiliser les directives

et <template></template> pour accéder à tous les accessoires de slot. v-slot

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
      </template>
    </child-component>
  </div>
</template>

Désormais, tous nos accessoires de slot (dans notre exemple, juste

) seront disponibles en tant que propriétés de l'objet info, et nous pouvons facilement changer notre article en Display slot contenu. description

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

L'effet final est le suivant :

Résumé

Bien que l'emplacement du scope Vue soit un très simple Le concept consistant à rendre les données des sous-composants accessibles au contenu des emplacements peut être utile pour concevoir d'excellents composants. En conservant les données au même endroit et en les liant à d’autres emplacements, la gestion des différents états devient plus claire.

Adresse originale : https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

Auteur : Ashish Lahoti

Adresse de traduction : https://segmentfault.com/a/1190000039801512

Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation ! !

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!