<template> <h1>Named Scoped Slots</h1> <p>Named scoped slots "leftSlot" and "rightSlot" send different data to App.vue from the SlotComp.vue component.</p> <hr> <slot-comp #leftSlot="leftProps"> <div>{{ leftProps.text }}</div> </slot-comp> <slot-comp #rightSlot="rightProps"> <div>{{ rightProps.text }}</div> </slot-comp> </template> <script></script> <style> #app { width: 300px; } #app > div { display: inline-block; background-color: lightgreen; width: 100px; padding: 10px; margin: 10px; } </style>

 <template> <slot name="leftSlot" :text="leftText" ></slot> <slot name="rightSlot" :text="rightText" ></slot> </template> <script> export default { data() { return { leftText: 'This text belongs to the LEFT slot.', rightText: 'This text belongs to the RIGHT slot.' } } } </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')