Article directory
scope
Everything in a parent template is compiled in the parent scope; everything in a child template is compiled in the child scope.
default content
We probably want this to render the text "Submit" most of the time. To use "Submit" as a fallback, we can put it inside a tag:
<button type="submit">
<slot>Submit</slot>
</button>
named slot
usage
The child component corresponds to it by adding the name attribute to the slot,
and the parent component corresponds to it through the v-slot attribute
named abbreviation
Like v-on and v-bind, v-slot has an abbreviation that replaces everything before the argument (v-slot:) with the character #. For example v-slot:header can be rewritten as #header:
Official website example
For example, for a component with the following template:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
An export without a name will have the implicit name "default"
<base-layout>
<template #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>
</base-layout>
Note that v-slots can only be added on top (with one exception, just below)
Scoped slots
Before we used slots, the parent scope and the child scope do not interfere with each other, but sometimes we want to get the value of the child scope.
Here we can do it. The child component wants to pass through v-mode: binding The value given to the parent component, the parent component accepts it through v-slot
Official website example
Subcomponent (current-user)
In order to make user available in the slot content of the parent, we can bind user as an attribute of the element:
remember that this is not a prop passing value, but a slot syntax, and the slot where the slot is located The user of the component is passed up
<span>
<slot v-bind:user="user">
{
{
user.lastName }}
</slot>
</span>
Attributes that the parent component
binds to the element are called slot props. Now in the parent scope, we can use v-slot with a value to define the name of the slot prop we provide:
<current-user>
<template v-slot:default="slotProps">
{
{
slotProps.user.firstName }}
</template>
</current-user>
In this example, we chose to name the object containing all slot props slotProps, but you can use any name you like.
Abbreviated syntax for exclusive default slot
What was written above uses v-slot, let's discuss it here
<current-user v-slot:default="slotProps">
{
{
slotProps.user.firstName }}
</current-user>
Of course, we can also abbreviate, because there is only one, you can use the default
<current-user v-slot="slotProps">
{
{
slotProps.user.firstName }}
</current-user>
Note that the abbreviated syntax for default slots cannot be mixed with named slots, as it would lead to ambiguous scope
Deconstructing Socket Prop
dynamic slot name
v-slot can also bind some dynamic values
<base-layout>
<template v-slot:[动态的值]>
...
</template>
</base-layout>