Exploring the world of components is new to me, and I'm currently trying to understand how the parent-child relationship works in components. I have come across component libraries that define parent-child components, such as tables and table rows:
<my-table> <!-- Parent -->
<my-tr> </my-tr> <!-- Child -->
</my-table>
From what I gather, the child components interact with the parent components through slots. So the parent component should be defined like this:
<template>
<div>
<slot></slot>
</div>
</template>
The parent element can then have multiple <my-tr> components, and the slot should render all of them. However, I am attempting something a bit more complex.
I am working on creating a slider using a similar approach. The slider consists of a my-slider component with my-slider-item components defined within it. I aim to control the visibility of these child components by modifying their properties.
The structure should look like this:
<my-slider>
<my-slider-item>Item 1</my-slider-item>
<my-slider-item>Item 2</my-slider-item>
<my-slider-item>Item 3</my-slider-item>
</my-slider>
my-slider component
<template>
<div class="my-slider">
<slot></slot>
</div>
</template>
my-slider-item component
<template>
<div class="my-slider__item">
<slot></slot>
</div>
</template>
Now, my challenge lies in determining the number of <my-slider-item> components defined in the parent slot so that I can control the visibility of one child at a time to create the slider effect. Despite reviewing numerous examples, I seem to be missing a basic concept. I would greatly appreciate any assistance. Thank you!