Add a <slot></slot> tag to the component to accept the DOM structure passed

Slot can have a name attribute to accept the corresponding data

  • Scope slot

Usage scenarios

The structure of the component loop that specifies the data by the external parent

<template  slot-scope='props'>
    <li>{{props.item}}</li>
</template>Copy the code
  • Dynamic components

<component :is=’type’></component>

Switches components based on the value of is

V-once Does not destroy the content displayed for the first time, but saves it in memory and loads it directly next time, improving performance