Conceptual difference

Named slot: how to distinguish when there are multiple slots at the same time. Just specify a name for each slot

Scope slot: how to use the data of child components in the parent component to define the slot content. A simple understanding: the child slot displays its own internal data by default, but the parent wants to make a splicing display of this data. Then the problem comes. The parent and son have different scopes. How can the parent get the data of the child? The scope slot is to solve this problem

Take a look at the old one first:

1, 2.6 previously obsolete syntax:

1. Named slot:

Writing method

Subcomponent: specify a name for the slot

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

Parent component: (it can also be used on ordinary elements, with corresponding names. If no name is specified, it will be placed in the default slot)

<base-layout>
  <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>
</base-layout>

2. Scope slot:

Writing method:

Sub components:

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

Parent component:

<slot-example>
  <template slot="default" slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
</slot-example>

2, New syntax of vue 2.6: v-slot instruction is introduced (v-slot can only be added on tenplate)

1. Named slot:

Subcomponent: specify a name for the slot, which is the same as the old syntax
Parent component:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  <!-- It can also be specified explicitly default -->
  <!-- <template v-slot:default> -->
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  <!-- </template> -->
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

2. Scope slot:

Sub component writing method: the same as the old syntax
Parent component writing method:

<current-user>
  <template v-slot:default="slotProps">
  <!-- It cannot be used directly here user，Because the parent component is not recognized user -->
    {{ slotProps.user.firstName }}
  </template>
</current-user>

The complete writing method of named + scope: v-slot:default = "slotprops" means that it is inserted into the default slot and bound with a slotprops. The data can be used in the slot, provided that the sub component slot must be bound with v-bind

##Summary: the new syntax is different from the obsolete syntax only in the parent component. The complete writing method is as follows:
Obsolete syntax:

<slot-example>
  <template slot="default" slot-scope="slotProps"><!-- Use two instructions to specify the slots separately name And slots prop -->
    {{ slotProps.msg }}
  </template>
</slot-example>

New syntax:

<current-user>
  <template v-slot:default="slotProps"><!-- Use one instruction to specify the slot at the same time name And slots prop -->
    {{ slotProps.user.firstName }}
  </template>
</current-user>

The new syntax integrates slot related name assignment and slot prop into one instruction by introducing v-slot instruction, but its abbreviation is easy to be confused

Suggestions for use: (don't over abbreviate)
1. Simply use named slot: # slot name, such as #default #header #footer
2. Use both named slot and scope slot: # slot name = 'slot prop name', such as #default = "slotProps" #header = "user"

Special note: obsolete syntax is still supported after 2.6. If it is an old project and there are no clear requirements, it is not necessary to use the old syntax

Please check for details https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD
##If there is any mistake, please correct it