Forward slots to child components
npm install vue-forward-slotsEffortlessly forward slots to child components in Vue 3 applications.
!license
- Easily forward all slots or specific slots to child components
- Simple and declarative syntax
In Vue applications, it's common to need to forward slots from a parent component to a child component. However, the
default way of doing this can be verbose and repetitive. Consider the following example:
``vue`
Verbose and hard to read!
`vue`
Simple and clean!
`bash`
npm install vue-forward-slots
You can import it in the component where you want to use it.
`vue`
A classic example is that of a table component with multiple levels of nested components.
We can easily define and forward slots to nested components using the ForwardSlots component.
#### Root Component
We define the slots in the root component.
`vue
Name
// We still have access to the slot data like we would normally
`
#### Table Component
We forward the slots to the child components.
`vue`
// Notice that we can wrap multiple components in the ForwardSlots component
#### TableHead Component
The TableHeadComponent now has access to the slots defined in the root component. If no slot is provided, it will
default to the text in the slot.
`vue`
Some default text
Some default text
#### TableBody Component
The TableBodyComponent also has access to the slots defined in the root component. Notice how we also pass the user data.
`vue`
{{ user.name }}
{{ user.status }}
We could even go a step further and forward the slots to the next level of child components.
`vue`
In theory, we could keep forwarding slots to as many levels of child components as we need.
`vue
// For a single slot
// For multiple slots
`
`vue
// For a single slot
// For multiple slots
``