Empowering Parent Components with Data from Child Scoped Slots in Vue 3

// MyList.vue (Child Component)
<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot name="item" :item="item" :index="item.id"> <!-- Scoped Slot -->
          <!-- Fallback content -->
          {{ item.name }}
        </slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    items: Array
  }
};
</script>

// App.vue (Parent Component)
<template>
  <MyList :items="products" title="Our Products">
    <template v-slot:item="slotProps"> <!-- Accessing slotProps from child -->
      <div :style="{ color: slotProps.item.price > 50 ? 'red' : 'green' }">
        <strong>{{ slotProps.item.name }}</strong> - ${{ slotProps.item.price }}
        <span v-if="slotProps.item.price > 50"> (Premium)</span>
        <small> (Index: {{ slotProps.index }})</small>
      </div>
    </template>
  </MyList>

  <hr/>

  <MyList :items="services" title="Our Services">
    <template v-slot:item="{ item, index }"> <!-- Destructuring slotProps -->
      <p>Service: {{ item.name }} (ID: {{ index }})</p>
    </template>
  </MyList>
</template>

<script>
import MyList from './MyList.vue';

export default {
  components: { MyList },
  setup() {
    const products = [
      { id: 1, name: 'Laptop', price: 1200 },
      { id: 2, name: 'Mouse', price: 25 },
      { id: 3, name: 'Keyboard', price: 75 }
    ];

    const services = [
      { id: 10, name: 'Web Development', price: 5000 },
      { id: 11, name: 'SEO Optimization', price: 1500 }
    ];

    return { products, services };
  }
};
</script>