YouTip LogoYouTip

Home > Vue.js > Vue3 Api Slot

Vue3 Api Slot

📅 2026-06-23 | 📂 Vue.js
# Vue3 Slots (``) In Vue 3, slots are a powerful mechanism that allows parent components to pass template content down to child components. You can think of a slot as a placeholder or a "portal" inside the child component. The parent component can inject any HTML elements, text, or other Vue components into these placeholders. This architecture enables child components to remain highly reusable and flexible, as they do not need to hardcode their internal layout or content structure. --- ## Basic Usage of Slots ### 1. Default Slots The default slot is the simplest type of slot. In the child component, you define a placeholder using the `` tag. When the parent component renders the child, any content placed between the child component's opening and closing tags will be injected into that `` placeholder. #### Child Component (`ChildComponent.vue`) ```vue ``` #### Parent Component (`ParentComponent.vue`) ```vue ``` #### How it works: * The content `

This is custom content passed from the parent component.

` replaces the `` tag in the child component. * If the parent component uses `` without passing any inner content, the child will render its fallback content: `"Default fallback content"`. --- ### 2. Named Slots Named slots allow you to define multiple slot placeholders within a single child component. By assigning a `name` attribute to each ``, you can target specific locations. In the parent component, you target these slots using the `v-slot` directive (or its shorthand `#`). #### Child Component (`ChildComponent.vue`) ```vue ``` #### Parent Component (`ParentComponent.vue`) ```vue ``` #### Key Points: * Any content not wrapped in a `