<template>
  <h1>Scoped Slots</h1>
  <p>App.vue controls how local data from the scoped slot is rendered.</p>
  <slot-comp v-slot="food">
    <hr>
    <h2>{{ food.foodName }}<img :src=food.foodUrl></h2>
    <p class="greenP">{{ food.foodDesc }}</p>
  </slot-comp>
</template>

<script></script>

<style>
  #app {
    width: 300px;
  }
  h2, .greenP {
    background-color: lightgreen;
    padding: 10px;
    margin: 0;
  }
  img {
    float: right;
    height: 70px;
    margin-left: 10px;
  }
</style>                  

<template>
    <slot 
    v-for="x in foods" 
    :key="x.name" 
    :foodName="x.name"
    :foodDesc="x.desc"
    :foodUrl="x.url"
    ></slot>
</template>

<script>
export default {
    data() {
        return {
            // foods: ['Apple','Orange','Lemon','Beetle']
            
            foods: [
                { name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
                { name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
                { name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
                { name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
                { name: 'Cake', desc: 'Cake is something sweet that tates good but is not consodered healthy.', url: 'img_cake.svg' }
            ]
        }
    }
}
</script>

<style></style>                  

import { createApp } from 'vue'

import App from './App.vue'
import SlotComp from './components/SlotComp.vue'

const app = createApp(App)
app.component('slot-comp', SlotComp)
app.mount('#app')