What is the slot.

Slot, also known as a slot, can be compared to a card-like FC game console. The game console (sub-component) exposes the card slot (slot) to allow the user to insert different magnetic strips of game (custom content), and the game machine reads and loads the game from the magnetic strips. A slot in a Vue is an HTML template for a component that is provided by the user, the parent component. An interface that the child exposes for the parent to pass in custom content, so to speak.

The effect of slot.

Allows users to extend components to better reuse and customize them. Examples include layout components, table columns, and drop-down options

How do you use the slot.

Slot usage can be divided into three categories: default slot, named slot, and scoped slot subcomponents:

  • Slot with<slot>Tag to determine the location of the render, which contains backup content if the parent component does not pass content
  • A named slotwithnameProperty to represent the name of the slot, not passed as the default slot
  • A scope slot binds properties on a scope to pass information from the child to the parent. These properties are hung on objects accepted by the parent slot-scope.
// Child.vue
<template>
  <div>
    <main>
    <! -- Default slot -->
        <slot>
          <! -- Slot backup content -->
          <h3>Don't preach content</h3>
        </slot>
    </main>

    <! -- named slot -->
    <header>
        <slot name="header">
          <h3>Header slot is not passed</h3>
        </slot>
    </header>

    <! -- Scope slot -->
    <footer>
        <slot name="footer" testProps="Values of child components">
          <h3>The footer slot was not passed</h3>
        </slot>
    <footer>
  </div>
</template>

<style scoped>
div{
 border: 1px solid # 000;  
}
</style>
Copy the code

When used in the parent component:

  • The default slot is to write content directly into the child component’s label
  • A named slotIt’s in addition to the default slotslotProperty for a child component slotnameAttribute values
  • Scope slotbyslot-scopeGets information about the child components to use in the content. Here you can use deconstruction syntax to get the desired properties directly
// Parent.vue
<child>
  <! -- Default slot -->
  <div>The default slot</div>  
  <! -- named slot -->
  <div slot="header">Named slot header</div>
  <! -- Scope slot -->
  <div slot="footer" slot-scope="slotProps">
    {{slotProps.testProps}}
  </div>
</child>
Copy the code

Render the result as

v-slot

In VUe2.6, the above API was soft-deprecated (officially deprecated in 3.0) in favor of the built-in instruction V-slot, which can be abbreviated to [#].

The child component usage remains unchanged in the parent component

  • slotAttribute deprecated, named slot through the instruction parameterV - slot: slotIn the form of, can be simplified as# slot name.
  • slot-scopeProperty deprecated, scope slot passedv-slot:xxx="slotProps"SlotProps to get the properties coming out of the child component
  • v-slotAttributes can only be used in<template>Is used on, but inThere are only default slotsCan be used on component labels
//Parent
<template>
  <child>
   <! -- Default slot -->
   <template v-slot>
     <div>The default slot</div>
   </template>
   <! -- named slot -->
   <template #header>
     <div>A named slot</div>
   </template>
   <! -- Scope slot -->
   <template #footer="slotProps">
     <div>
      {{slotProps.testProps}}
     </div>
   </template>
  <child>
</template>
Copy the code

Extended usage:

  1. This can also be obtained through deconstructionv-slot={user}.

    You can rename itv-slot="{user: newName}"And define default valuesV-slot ="{user = 'default '}"
  2. Slot names can change dynamicallyv-slot:[slotName]

Note:

  1. Default slot namedefault, you can omit default and write directlyv-slot.

    I can’t abbreviate it to # without writing an argument, let’s write it#default(This is the same for all instructions, v-bind, V-ON)
  2. When multiple slots are used together, the default of the V-slot cannot be omitted

How the scope slot works

Slot is essentially a function that returns a VNode. Normally, components in a Vue need to go through the Template >> Render Function >> VNode >> DOM process to render onto a page. The essence of component mounting is to perform render functions to get vNodes, and data/props/computed are all data sources for vNodes.

Prior to 2.5, a normal slot would be in the form of a VNode, whereas a scoped slot would require the child to access the child’s data from the parent. So under the parent component is an unexecuted function (slotScope) => return h(‘div’, slotScope.msg), which accepts the slotProps parameter of the child component and is called to pass in data when the child component renders the instance.

After 2.6, the two were merged and the normal slot became a function, but it took no arguments.

Outline Shorthand:

Keep learning records only. Please correct any mistakes or omissions

reference

Vue documentation – Slot How to understand slot in vue.js components? Origin of v-slot – RFC