What is Vue's scoped slots pattern?

Scoped slots are a powerful pattern where the child component passes data back to the parent's slot content — enabling the parent to control rendering while the child controls data. This "inverts control" for flexible, reusable components. Pattern: Renderless component (headless component): a component that provides behavior/data/logic but no UI. All the UI is defined by the parent via scoped slots. // UseMouseTracker.vue <template> <slot :x="x" :y="y" /> </template> <script setup> const x = ref(0), y = ref(0); const update = (e) => { x.value = e.clientX; y.value = e.clientY; }; onMounted(() => document.addEventListener("mousemove", update)); onUnmounted(() => document.removeEventListener("mousemove", update)); </script>. Parent usage: <UseMouseTracker v-slot="{ x, y }"> <p>Mouse: {{ x }}, {{ y }}</p> </UseMouseTracker>. DataTable with scoped slots: <DataTable :data="users"> <template #cell-name="{ row }"> <Avatar :user="row" /> {{ row.name }} </template> </DataTable>. The table handles sorting/pagination; the parent controls cell rendering. Modern alternative: composables replace renderless components in many cases — same logic reuse without wrapper components. Use renderless components when the component controls DOM structure/events that composables can't easily handle.