Remplacement de $children dans Vue 3

Par Florian Journeau, il y a 5 ans

Javascript VueJS

Bonjour, je suis actuellement en train de suivre le tuto de Grafikart sur VueJS 2 mais je le mets en application sur Vue 3 (car mon besoin sera d'utiliser Vue 3).

Mon problème est que la propriété $children n'existe plus dans Vue 3. Dans la doc, ils parlent d'utiliser $ref à la place. J'ai essayé pas mal de choses mais étant débutant en Vue, je n'y arrive pas.

Contexte : Vidéo de formation (direct au timecode).

Le composant Carousel contient des enfants directs, les composants CarouselSlide.

// Compostant Carousel : export default { // [...] mounted() { // Je voudrais faire marcher cette ligne sur Vue 3 : this.slides = this.$children this.slides.forEach((slide, i) => { slide.index = i; }); }, };

Ce que je souhaite

Je ne veux pas forcément la solution pour ce problème, mais si vous avez des exemples pour faire des choses similaires avec Vue 3 (lister et récupérer sous forme d'objets composants les enfants), je suis preneur.
Ça m'aidera déjà à avancer.

Merci.

2 réponses

BurnItAll, il y a 5 ans

Salut,

Il te suffit d'utiliser l'attribut "ref" sur l'élément (html) root de ton composant puis d'apeller les éléments enfants avec _.children :

<template> <div ref="carousel"> <slot> <!-- <div>Slide 1</div> <div>Slide 2</div> --> </slot> </div> </template>

Functional API

<script> export default { data: () => ({ slides: [] }), mounted() { const { carousel } = this.$refs this.slides = carousel.children // HTMLCollection[div, div] this.slides.forEach((slide, i) => { console.log(slide, i) }) } } </script>

Composition API

<script> import { ref, onMounted } from "vue" export default { setup() { const carousel = ref(null) onMounted(() => { const slides = carousel.value.children // HTMLCollection[div, div] slides.forEach((slide, i) => { console.log(slide, i) }) }) return { carousel } } } </script>
Florian Journeau, il y a 5 ans

Super !
Merci beaucoup BurnItAll ! 🙂