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>

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

<div> Override fallback content </div>

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

Tutoriel vue.js]

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>

, le contenu de secours restitue slot. info.title

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

sera affiché. title

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

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

. TypeError: Cannot read property ‘description’ of undefined

objet. info

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

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

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>

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

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

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

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!