What is a slot?
We know that we can’t wrap anything in the middle of the Child component’s tag in Vue.
Vue has added a new slot mechanism called scoped slot. The required version is 2.1.0+;
Slots are placeholders. It gives your HTML template a place in the component for you to pass something in. Slots are divided into anonymous slots, named slots, and scoped slots.
In 2.6.0, we introduced a new uniform syntax (the V-slot directive) for named slots and scoped slots. It replaces slot and slot-scope
Anonymous slot
Anonymous slots, we can also call them single slots or default slots. In contrast to the named slot, it does not need to set the name attribute, and its hidden name attribute is default.
father.vue
child.vue
Anonymous slot, the name attribute corresponds to the default, can not write the default meaning;
If there are more than two anonymous slots, the contents of the child tag will be replaced by each slot;
Named slot (vue2.6.0+ Discarded slot=’name’)
As the name implies, slot has a name attached to it. The definition: or to use a simple abbreviation of the definition #header uses: To wrap a template tag
father.vue
child.vue
Use multiple named slots. The position of the slot is not determined by the position of the slot, but is replaced by the position at the time of definition
father.vue
child.vue
Scope slot
It’s the slot that passes the data
When you want to use data in a slot, there is a problem with the problem scope. The official Vue documentation states that all content in the parent template is compiled in the parent scope. Everything in a subtemplate is compiled in a subscope;
To make the data in the child component available in the parent’s slot content we can bind the data as a feature of the element: v-bind:text=”text”
Note:
The difference between anonymous and named scope slots is v-slot:defult=” accepted name “(defult(anonymous can not write, named instead write the corresponding name))
For example, one corresponds to v-slot=”{one}”.
rendering
