Comment accéder aux props des slots dans le hook créé ?

Question

J'essaie d'accéder aux propriétés que je transmets à mon créneau. Mais mon slotProps sont indéfinis.

Comme je suis encore nouveau dans Vue et que j'ai lu leur documentation, je n'arrive toujours pas à comprendre pourquoi je ne peux pas accéder aux données des accessoires.

Problème

J'essaie d'accéder au slotProps dans les composants de mon enfant created mais c'est indéfini

texte souligné

<template>
  <div>
    <slot :data="data" :loading="loading"></slot>
  </div>
</template>

Enfant

<template v-slot:default="slotProps">
  <div >

  </div>
</template>

<script>
export default {
  name: "child"
  created: function() {
    console.log("slotProps", slotProps);
  }
};
</script>

Answer 1

Vous n'avez pas besoin de la created() le crochet du cycle de vie pour obtenir ce que vous voulez. Il y a quelques points à éclaircir :

• Ce que vous utilisez s'appelle en fait créneaux horaires . Ils sont utiles car, contrairement à l'utilisation des emplacements par défaut et nommés, le composant parent ne peut pas accéder aux données de son ou ses composants enfants.

• Ce que vous appelez un Enfant est en fait le composant parent.

Enfant.vue devrait être quelque chose comme ceci :

<template>
  <div>
    <main>
      <slot :data="data1" :loading="loading1" />
    </main>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data () {
    return {
      data1: 'foo',
      loading1: 'bar'
    }
  }
}
</script>

Dans un Parent.vue vous pouvez accéder aux données du composant ci-dessus comme suit :

<template>
  <child>
    <template v-slot="slotProps">
      {{ slotProps.data }},
      {{ slotProps.loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

Ou vous pouvez aussi détruire les objets à la volée comme suit :

<template>
  <child>
    <template v-slot="{data, loading }">
      {{ data }},
      {{ loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

C'est la façon la plus propre d'accéder aux données d'un composant enfant à partir du parent en utilisant les slots scopés.