What is a slot?

  • Slots are a concept from Vue, and as the name suggests, slots are used to decide what you want to carry and insert it into a specific location, thus making templates chunked, modular and reusable.

  • Does the parent control whether or not the slot is displayed and how it is displayed, while the child controls where the slot is displayed

How to use the slot

The parent component slotOne1

<template> <div> I am the parent of slotOne1> <p style="color:red"> I am the parent of slot-one2 </p> <slot-one2></ slotOne1> </div> </template>Copy the code

Subcomponents slotOne2

<template> <div class="slotOne2"> </div> </template>Copy the code

The results are as follows:

A named slot

The parent component:

<template> <div> I am the parent component <slot-two> <p> la la la, la la la, </p> <template slot="header"> <p> </template> <p slot="footer"> </p> </slot-two> </div> </template>Copy the code

Use template in the parent component and write a slot value to specify the location of the content in the child component (you don’t have to write to template, of course). Anything else that doesn’t have a value is put into a slot in the child component that doesn’t have a name attribute

Child components:

<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
Copy the code

Three slot tags are defined in the child component, two of which add the name attribute header and footer, respectively

The results are as follows:

The default contents of the slot

The parent component:

<template> <div> I am the parent component <slot-two></slot-two> </div> </template>Copy the code

Child components:

<template> <div class="slottwo"> <slot> </slot> </div> </template>Copy the code

You can write content in the slot tag of the child component, displaying the default content of the child component when the parent component does not write anything, and replacing the default content of the child component when the parent component writes something

Compile scope

The parent component:

<template> <div> I am the parent component <slot-two> <p>{{name}}</p> </slot-two> </div> </template> <script> export default {data () { Return {name: 'Jack'}}} </script>Copy the code

Child components:

<template>
  <div class="slottwo">
    <slot></slot>
  </div>
</template>
Copy the code

The results are as follows:

I am the parent component Jack

Scope slot:

The parent component:

<template> <div> I am scope slot <slot-three> <template slot-scope="user"> <div v-for="(item, index) in user.data" :key="index"> {{item}} </div> </template> </slot-three> </div> </template>Copy the code

Use the slot-scope property on the parent component, where user.data is the value passed by the child component

Child components:

<template> <div> I am a child of the scope slot <slot :data="user"></slot> </div> </template> <script> export default {name: 'slotthree', data () { return { user: [ {name: 'Jack', sex: 'boy'}, {name: 'Jone', sex: 'girl'}, {name: 'Tom', sex: 'boy'} ] } } } </script>Copy the code

Bind the desired value to the slot tag of the child component.