A slot is a placeholder in the child component that is provided to the parent component. It is represented by <slot></slot>. The parent component can fill any template code in this placeholder, such as HTML, components, etc. The content will replace the <slot></slot> tag of the child component.
It is worth noting that in Vue 2.6.0, a new unified syntax (namely v-slot
instruction) has been introduced for named slots and scoped slots . It replaces slot
and slot-scope
these two attributes that are currently obsolete but not removed and are still in the document.
1. Default slot/anonymous slot
Subassembly:
// Child.vue
<template>
<div>
<div class="test">
<slot></slot>
</div>
</div>
</template>
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
Your Profile
</Child>
</div>
</template>
When the component is rendered, it <slot></slot>
will be replaced with "Your Profile". The slot can contain any template code, including HTML and even other components.
If <Child/>
the template
medium does not contain an <slot>
element, then anything between the start tag and an end tag assembly is discarded.
2. Named Slot
A named slot, as the name implies, is to give the slot a name. There can only be one anonymous slot, and there can be more than n named slots. When multiple slots are needed, you can use the feature of <slot>: name. This feature can be used to define additional slots
Subassembly:
<template>
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
The first: the <template>
use of the special slot
attributes, content can be passed from parent to be named slots
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
<template slot="header">
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<p>Here's some contact info</p>
</template>
</Child>
</div>
</template>
The second type: directly use the slot
attribute on a common element:
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</Child>
</div>
</template>
Consistent with the first result.
Note that there is actually an unnamed slot, which is the default slot , to capture all unmatched content.
Updates after V2.6.0:
The child component remains unchanged, and the parent component uses the v-slot attribute instead. When providing content to a named slot, we can <template>
use a v-slot
directive on an element and v-slot
provide its name in the form of a parameter:
Parent component:
<template>
<div id="app">
<Child>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</Child>
</div>
</template>
It's that simple, the name of the slot is now used in v-slot:slotName
this form.
Now <template>
all the content in the element will be passed into the corresponding slot. Not wrapped in with any v-slot
of <template>
be considered a default slot content in the content will be.
Like v-on
and v-bind
, v-slot
there are abbreviations, that is v-slot:
, replace all the content before the parameter ( ) with characters #
. For example, it v-slot:header
can be rewritten as #header
:
It is worth noting that: it v-slot
can only be added to the <template>
above , which is slot
different from the deprecated attributes. The default situation is not repeated here.
3. Scope slot
The data in the child component is not accessible by default in the parent component. In order to make the data of the child component available in the parent slot content, we can bind the data as <slot>
an attribute of the element:
Subassembly:
<template>
<div>
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
</script>
<template>
The slot-scope
attribute used on the above can receive the prop passed to the slot
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
<template slot-scope="slotProps">
{
{slotProps}}
<br/>
{
{slotProps.data}}
</template>
</Child>
</div>
</template>
Here it is slot-scope
declared that the received prop object will slotProps
exist as a variable in the <template>
scope. You can name it whatever you want, just like naming JavaScript function parameters slotProps
.
The results are as follows:
It can be seen that what is stored in slotProps is an object composed of data passed by all subcomponents.
Similarly, the slot-scope attribute can also be used directly for non- <template>
elements (including components):
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
<div slot-scope="slotProps">
<ul>
<li v-for="item in slotProps.data">{
{item}}</li>
</ul>
</div>
</Child>
</div>
</template>
The results are as follows:
Updates after V2.6.0:
The child component remains unchanged, and the parent component uses the v-slot attribute instead. Now in the parent scope, we can use valued v-slot
to define the name of the slot prop we provide
Parent component:
//Parent.vue
<template>
<div id="app">
<Child>
<template v-slot="slotProps">
{
{ slotProps.data }}
</template>
</Child>
</div>
</template>
The result is unchanged.
summary:
1. Simple understanding, the default slot and named slot are parent components that provide both styles and templates, and the scope slot is data that is the parent component that comes with the child component and only provides styles
After 2. V2.6.0 any not wrapped in with v-slot
the <template>
is considered the default slot contents are contents, i.e., v-slot can not be used for common elements