1. Common slot

Purpose: To display “This is a slot” in the child component TAB

Parent component:

<template>
  <div>
    <HelloWorld>This is a slot</HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  data() { return{}; }};</script>
<style scoped lang="less"></style>

Copy the code

In child components:

<template>
  <div class="hello">
    <slot>Here's the default...</slot>If the parent component is not set to 'this is a slot', it will display 'this is the default content... '</div>
</template>

<script>
export default {
  name: "HelloWorld"};</script>
<style scoped lang="less"></style>

Copy the code

2. Named slot

Use: ** V-slot: ‘slot name’ ** without setting the name is the default slot ~ abbreviation: # slot name

The parent component:

<template>
  <div class="home">
    <! -- named slot start -->
    <tmpSlot>
      <! -- V-slot can only be added to the template tag (if there is only a default slot, it can be used directly on the component) -->
      <template v-slot:top>This is the head</template>
      <template>This is the content (default slot)</template>
      <template v-slot:foot>This is the end</template>
      <! - for - >
      <template #suoName>This is the abbreviation for named slot</template>
    </tmpSlot>
    <! -- named slot end -->
  </div>
</template>

<script>
// @ is an alias to /src
import tmpSlot from "./component/tmpSlot.vue";

export default {
  name: "Home".components: {
    tmpSlot,
  },
  data() {
    return {
      msg: "hello"}; }};</script>

Copy the code

Child components:

<template>
  <div class="tmp">
    <p>This is the named slot page</p>
    <! -- <slot></slot> -->
    <div class="container">
      <header>
        <! - the header - >
        <slot name="top"></slot>
      </header>
      <main>
        <! - content - >
        <slot></slot>
      </main>
      <footer>
        <! - the footer - >
        <slot name="foot"></slot>
      </footer>
      <nav>
        <! -- Add abbreviation to slot name -->
        <slot name="suoName"></slot>
      </nav>
    </div>
  </div>
</template>
<style scoped>
.tmp {
  width: 600px;
  height: 150px;
  background-color: antiquewhite;
}
</style>

Copy the code

3. Scope slot

The parent component:

<template>
  <div class="home">
    <! -- scope slot start -->
    <areaSlot>
      <template v-slot:default="slotProp">{{ slotProp.list.name }}</template>
    </areaSlot>
     <! -- scope slot end -->
     
    <! -- shorthand is the default slot and only one -->
    <areaSlot v-slot="slotProps">
      {{ slotProps.list.name }}
    </areaSlot>
   
  </div>
</template>

<script>
import areaSlot from "./component/areaSlot.vue";

export default {
  name: "Home".components: {
    areaSlot,
  },
  data() {
    return {
      msg: "hello"}; }};</script>

Copy the code

Child components:

<template>
  <div class="area">
    <p>This is the scope slot page</p>
    <div class="s">
      <slot :list="list">{{ list.age }}</slot>// The tag contains the backup content</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: { name: "Zhang".age: 19.newName: "Little Zhang"}}; }};</script>
<style scoped lang="less">
.area {
  width: 400px;
  height: 200px;
  background-color: lightpink;
  .s {
    margin-top: 10px; }}</style>


Copy the code

4. Deconstruct the slot

Officially:

The inner workings of a scoped slot are to wrap the contents of your slot in a function with a single argument:

function (slotProps) { 
        // Slot contents
    }
Copy the code

So the value of v-slot can actually be any JavaScript expression that can be used as a parameter in a function definition. So in supported environments (single-file components or modern browsers), you can also use ES2015 deconstruction to pass in specific slot prop

<! -- deconstruct slot start --><areaSlot v-slot="{ list }">
      {{ list.age }}
    </areaSlot><! -- can be renamed --><areaSlot v-slot="{ list: newist }">
      {{ newist.newName }}
    </areaSlot><! -- You can define the backup content --><areaSlot v-slot={list = {name: 'wangyiyi'}}">
      {{ list.name }}
    </areaSlot><! End -->Copy the code

This makes the scoped slot cleaner