1. Slot content

 

The parent component can insert html string components in the middle of the sub component elements of html. These components will be inserted into the position occupied by < slot > < / slot > of the sub component. If the sub component does not have < slot > < / slot >, the inserted content will be discarded

  <slot-child>
    <h3>Slot content</h3>
  </slot-child>

  <div>slot-child</div>
  <slot></slot>

Render results:

2. Render scope

All contents in the parent template are compiled in the parent scope; Everything in the sub template is compiled in the sub scope

The same instance property (i.e. the same scope) as the rest of the template can be accessed in the slot, but the real column property of the sub component cannot be accessed

3. Spare content

  Subcomponents can add alternate content to the slot tag. When the parent component template provides slot content, the provided slot content is rendered. If not, the alternate content between the slot tags is rendered

  <slot>
    <h3>Alternate content</h3>
  </slot>

4. Named slot

Sometimes we need multiple slots. In this case, the < slot > element has a special attribute: name. This attribute can be used to define additional slots

Template V-slot: the content contained in name will replace the position of the slot with the same name

A < slot > exit without a name will have an implied name "default", that is, without template, it is equivalent to V-slot: default, and without slot name=XX, it is also equivalent to slot name="default"

<template>
  <slot-child>
    <template v-slot:default>
      <span>defalut{{ msg }}</span>
    </template>

    <template v-slot:one>
      <span>one{{ msg }}</span>
    </template>

    <template v-slot:two>
      <span>two{{ msg }}</span>
    </template>
  </slot-child>
</template>

<template>
  <div>
    <span>1</span>
    <slot name="one"> </slot>
  </div>

  <div>
    <span>2</span>
    <slot name="two"> </slot>
  </div>

  <div>
    <span>3</span>
    <slot name="default"> </slot>
  </div>
</template>

5. Scope slot

By binding the attribute in the slot, the parent component can access the data of these child components. When there are multiple slots, pay attention to the consistency of name s

    <template v-slot:one="slotProps">
      <span>one{{ msg }}</span>
      <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
    </template>

<slot name="one" :item="item" :str="str"> </slot>

Abbreviation syntax for exclusive default slots

When there is only one slot, the above is the abbreviation of the following: default can be omitted

However, as long as multiple slots appear, always use the complete < template > based syntax for all slots

  <slot-child v-slot:default="slotProps">
    <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
  </slot-child>

  <slot-child>
    <template v-slot:default="slotProps">
      <h3>{{ slotProps.item }}{{ slotProps.str }}</h3>
    </template>
  </slot-child>

6. Deconstruct the slot

The internal working principle of the scope slot is to include the contents of your slot in a function passing in a single parameter

function (slotProps) {
  // ... Slot contents
}

This means that both the function and the deconstruction of the input parameters can be done

Deconstruction {str} = slotProps  

Deconstruction rename {str: str2}   = slotProps

Deconstruct the definition of alternative content {STR = 'alternative content'} = slotProps. Note that when the str attribute is undefined (explicitly declare str:undefined or the < slot > tag does not have: str=XX), STR is null or empty string, and 'alternative content' will not be used

    <template v-slot:two="{ str = 'spare str' }">
      <span>two{{ msg }}</span>
      <h3>{{ str }}</h3>
    </template>

<slot name="two"> </slot>

7. Dynamic slot name

The following is equivalent to < template V-slot: one = "slotprops" >

<template v-slot:[oneName]="slotProps">

  data() {
    return {
      oneName: "one",
    };
  },

8. Abbreviation of named slot

Like v-on and v-bind, v-slot also has abbreviations, that is, replace all the contents before the parameter (v-slot:) with characters #.

For example, v-slot:header can be rewritten as #header:

However, like other instructions, the abbreviation is only available when it has parameters, such as # = "{item}" is invalid

Must always be replaced by an explicit slot name,  # default="{ item }"

Dynamic slot names can also be abbreviated:

<template #[oneName]="slotProps">