Vue slot

Vue slot content review and record summary. See VUE 2.6.0 and later.

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 attributes that have been deprecated but not removed and are still in the document. The origin of the new syntax can be found in this RFC.

use

Slots are primarily used for flexible parts of a component, but in a recent encounter with the GS code specification that discourages v-HTML, slots can be used to achieve the same effect.

Based on using

<base-dialog>
    <template v-slot:header>
        <div class="parent-header-class">
            <span>{{title}}</span>
            <span class="icon"></span>
        </div>
    </template>
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header"></slot>
    </div>
<template>
Copy the code

Backup the content

<base-dialog>
    <template v-slot:header>
        <div class="parent-header-class">
            <span>{{title}}</span>
        </div>
    </template>
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header">The default title</slot>
    </div>
<template>
Copy the code

A named slot

The name attribute defines the slot name, which is easy to distinguish between multiple slots.

<base-dialog>
    <template v-slot:header>
        <p>header slot content</p>
    </template>
    
    <p>default slot content</p>
    
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header">The default title</slot>
        <slot>Default Slot content</slot>
    </div>
<template>
Copy the code

Vue also provides $slots for all incoming slots.

Named slot abbreviation

V-slot :header short for #header

<base-dialog>
    <template #header>
        <p>header slot content</p>
    </template>
    
    <p>default slot content</p>
    
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header">The default title</slot>
        <slot>Default Slot content</slot>
    </div>
<template>
Copy the code

Note If the default slot has parameters, it cannot be abbreviated as #=”slotProps”. You must write the name of the slot #default=”slotProps”.

Scope slot

The scope of the contents in the slot is the scope of the parent element, so if the slot needs to access the data in the component, it can be passed in by v-bind to the slot.

<base-dialog>
    <template v-slot:header="slotProps">
        <p>{{slotProps.userName}}</p>
    </template>
    
    <p>default slot content</p>
    
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header" :userName="userName">The default title</slot>
        <slot>Default Slot content</slot>
    </div>
<template>
...
data () {
    return {
        userName: 'xxx'}}Copy the code

Deconstructing slot prop

<base-dialog>
    <template v-slot:header="{ userName }">
        <p>{{userName}}</p>
    </template>
    
    <p>default slot content</p>
    
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot name="header" :userName="userName">The default title</slot>
        <slot>Default Slot content</slot>
    </div>
<template>
...
data () {
    return {
        userName: 'xxx'}}Copy the code

Exclusive default slot prop

This command is used when there is only one default slot, but not when there are multiple slots.

<base-dialog v-slot="{ userName }">
    <p>{{ userName }}</p>
</base-dialog>

// BaseDialog.vue

<template>
    <div>
        <slot :userName="userName">Default Slot content</slot>
    </div>
<template>
...
data () {
    return {
        userName: 'xxx'}}Copy the code

Note that the default slot abbreviation syntax should not be mixed with named slots, as it would result in undefined scope.

Dynamic slot name

<base-dialog>
    <template v-slot:[slotName] >
        <p>{{ userName }}</p>
    </template>
</base-dialog>
Copy the code

reference

Vue slot