VueJS: отслеживание порядка дочерних компонентов в родительском слоте во время выполнения

Слоты передаются как массив объектов, содержимое внутреннего элемента передается как значение внутри объекта. добавлены новые слоты с использованием сращивания массивов. Вы можете использовать v-html или другие методы, если дочерний компонент имеет больше элементов.

Родительский компонент

<template>
   <div>
     <slot></slot>
     <ul>
        <li v-for = "(s,i) in slotsArray" :key = "i">
            <slot :name = "s.name"></slot>
        </li>
     </ul>
 </div>
</template>
<script>
  export default {
    props: {
      slotsArray: { type: Array, default: null }
    }
  };</script>

Использование родительских компонентов и добавление слотов

<template>
  <div>
     <!-- Parent Component -->
     <parent-component :slotsArray = "slotsArray">
         <button @click = "addSlotToIndex(2, 'Item 21')">Add Item on 2nd 
            Index</button>
         <button @click = "addSlotToIndex(0, 'Item 00')">Add Item on 1st 
            Index</button>
         <template v-for = "(s) in slotsArray">
             <template :slot = "s.name">
                <p :key = "s.i">{{s.child}}</p>
             </template>
         </template>
  </parent-component></div></template>

<script>
import ParentComponent from './views/parent-child- 
    slots/ParentComponent.vue';

export default {
    name: 'App',
    components: { ParentComponent },
    data () {
        return {
            slotsArray: [
                {
                    name: 'slota',
                    child: 'Item 1'
                },
                {
                    name: 'slotb',
                    child: 'Item 2'
                },
                {
                    name: 'slotc',
                    child: 'Item 3'
                }
            ],
            addSlotToIndex (idx, value) {
                this.slotsArray.splice(idx, 0, {
                    name: idx > 0 ? this.slotsArray[idx - 1].name + 'a' : 
                     this.slotsArray[0].name + 'a',
                   child: value
            });
        }
    };
}};

Даже ваши родительские/дочерние компоненты сильно связаны, вам лучше не передавать состояние видимости слайда дочерним элементам. Это не очень хороший дизайн, слишком большая утечка состояния слайда. Сделайте всю логику слайдов внутри родителя (хороший дизайн и инкапсуляция).

ИГРОВАЯ ПЛОЩАДКА VUE SFC

Родитель.vue

<script setup>

import { ref, useSlots, watch, computed } from 'vue';

// the current component index
const current = ref(0);

const slots = useSlots();
// collect all slot child components
const $children = computed(() => slots.default().filter(vnode => vnode.type.render)); // remove all non-component vnodes
// watch for deletion of the current component and move to the next one
watch(() => $children.value.length, length => current.value < length || next(current.value - 1));


function prev(idx = current.value) {
  if (--idx < 0) idx = $children.value.length - 1;
  current.value = idx;
}

function next(idx = current.value) {
  if (++idx >= $children.value.length) idx = 0;
  current.value = idx;
}

defineExpose({
  prev,
  next,
});
</script>

<template>
  <section>
    <div>$children.length: {{ $children.length }}, current: {{ current }}</div>
    <component :is = "() => $children.filter((_, idx)=> idx === current)" />
  </section>
</template>

App.vue

<script setup>
import Parent from './Parent.vue';
import Child from './Child.vue';
import { ref } from 'vue';

const toggleSlide2 = ref(false);
const toggleSlide3 = ref(true);
const parent = ref();

</script>

<template>
  <div>
    <section>
      <button @click = "parent.prev()">Prev</button>
      <button @click = "parent.next()">Next</button>
      <button @click = "toggleSlide2 = !toggleSlide2">Toggle Slide 2</button>
       <button @click = "toggleSlide3 = !toggleSlide3">Toggle Slide 3</button>
    </section>

    <Parent ref = "parent">
      <Child>
        <h1>Slide 1</h1>
      </Child>
      <Child v-if = "toggleSlide2">
        <h1>Slide 2</h1>
      </Child>
      <Child v-if = "toggleSlide3">
        <h1>Slide 3</h1>
      </Child>
    </Parent>
  </div>
</template>

Продолжение Первого ответа. Попробуйте передать дочерний компонент таким образом. Недостатком является необходимость добавить html как строку и привязать как v-html.

<parent-component :slotsArray = "slotsArray">
  <button @click = "addSlotToIndex(2, 'Item 21')">Add Item on 2nd 
     Index</button>
  <button @click = "addSlotToIndex(0, 'Item 00')">Add Item on 1st 
     Index</button>
   <template v-for = "(s) in slotsArray">
    <template :slot = "s.name">
      <child-component :inner-html = "s.child" :key = "s.i"></child-component>
    </template>
  </template>
</parent-component>

Дочерний компонент

<template>
   <component :is = "tag">
     <slot>
       <div v-html = "innerHtml"></div>
     </slot>
   </component></template>



   <script>
  export default {
    props: {
       innerHtml: { type: String, default: '' },
       tag: { type: String, default: 'div' }
    }
  };</script>

Примечание. Может оказаться бесполезным, если дочерний компонент сложен и содержит больше элементов.