- Getting Started
- Declarative Rendering
- Basic Components
- Conditionals and Loops
- Composing with components
- Handling user input
- Component As Prop
- Device APIs
- React Native
- Ready for more?
- Vue Native Router
- Community Libraries
- How does it work?
- How to contribute
Note : Slots are supported only with vue-native-helper version 0.0.9 and above.
Vue Native just like Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the
<slot> element to serve as distribution outlets for content.
In order to allow a parent component to pass elements into a child component, provide a
<slot></slot> element inside the child component. Now, using the
child component in the parent, any code in the parent’s
<child> component will replace
<slot/> in the child component.
This allows you to compose parent and child elements as shown :
If you run this, when the component renders, the
<slot> element will be replaced by
<text>Will render myself in the child component. You are welcome.</text>. Slots can contain any template code or even other components.
child did not contain a
<slot> element, any content passed to it would simply be discarded.
There are times when it’s convineint to have multiple slots.
Consider this parent element :
Specify the slot names in the attribute
<slot> element in the child component has a special attribute,
name, which can be used to define named slots.
When the component renders, it will be in this order :
Notice that the order of the texts rendered corresponds to the
slots arranged in the child component. The unnamed slot acts as the default slot.
Sometimes you’ll want to provide a component with a reusable slot that can access data from the child component. For example, when building a simple
<todo-list> component, in some parts of the app, you may want the individual todo items to render something different than just what was defined in the
<todo-list>. This is where scoped slots come in.
To understand this better let’s take a simple example, consider two components named
child, conveniently named to explain this better.
Both these components look like this:
scope attribute can be used to receive the props for the slot from the child component. The data from the child element can be accessed as shown above with
slot component is used in the child element and is bound through the
v-bind to its data. The data that is bound here can be used in the parent component as shown.
The two texts will be rendered in this manner :