Module 9 - slots Flashcards
what are slots?
slot enables us to receive markup and vue code and place it instead of where we put the slots tag in the component that we pass the markup to.
What are named slots?
If you have more than 1 slot in a component you need to give the slots a name with a name attribute so you can set the dynamic content in the right place. You can have one unnamed slot and that would be the default slot.
What is the difference between slots and props?
props are used to pass data from outside of a component while slots are used in order to receive html+vue and place it instead of the slot tag
How do you pass markup to a named slot?
In order to pass html into a named slot you need to wrap it in a template tag and give it a v-slot directive with the value of the named slot. for example :
(template v-slot=”nameOfSlot)
content
(/template)
content that is not wrapped in the template will go to the default template implicitly. you can make it explicit by placing the rest of the content in a template with v-slot=default
What is v-slot used for
v-slot:”slotName” is a directive that you add to a template tag in order to assign the markup content in that template to a named slot.
Another usage is to pass props (data) from the component that has the slot to the component that uses the slot
What happens if you put html markup between slot tags?
The markup is used as a default value in case no markup is sent to the slot.
what is this.$slots
$slots is a property provided by vue that holds information about the slots data that the component has.
What is the shorthands for v-slot?
instead of v-slot:somename you can use #somename
What are scoped slots?
scoped slots allow you to pass data from inside the component that has the slot to the component that uses the slot and passes the markup
How do you pass the data from a scoped slot to the component that provides the markup?
In order to pass data from the slot to the component that is passing the markup to the slot you need to put a named attribute in the slot and bind it to the data.
(slot :item=”dataName”)(/slot)
How do you use the data passed from the component with the slot in the component passing the markup
In order to use the data from the component that has the slot in the component that passes the markup you need to wrap it in tag and on it use the v-slot directive and assign to it all of the props passed from the component that has the slot. for example:
component with slot
(slot v-bind:item=”goal” anotherItem=”…”)(/slot)
component with markup:
(template v-slot:default=”slotProps”)
(p) {{slotProps.goal}} (/p)
(/template)
Is there a shortcut for scoped slots if we only target the default slot
If we only target the default slot as a scoped slot we can omit the template tag and place the #default=”slotProps” directly on the markup
