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