“This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The Last Gwen Challenge 2021

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.

A slot is a placeholder provided by a child component to a parent component, represented by
. The parent component can fill this placeholder with any template code, such as HTML, components, etc., replacing the child component’s
tag.

The basic use

Write a parent component

<body>
    <div id="app"></div>
</body>

<script>
    const app = Vue.createApp({
        template: 
 parent 
 '
    })

    const vm = app.mount("#app")
</script>

Copy the code

Write another child component

app.component('son', {
    template: '
      
 
       
 subcomponent 
 
      
'
})
Copy the code

The parent component calls the child component

const app = Vue.createApp({
        template: '
 parent 

      
    })
Copy the code

How do slots work?

Just add
to the child component and use it in the parent component.

app.component('son', {
    template: '
      

        < H3 > subcomponent  
        
      
'
})
Copy the code
const app = Vue.createApp({
        template: '
 parent 

      
       ' This is what the parent will display in the child component 
       '
    })
Copy the code

Operation effect:

Slots support any DOM element, such as when we add a style style

const app = Vue.createApp({
    template: 
      
 
      
 
 })
Copy the code

The default slot

Define the default slot defined by the Slot component. Once defined, it acts as a pit, which you can think of as a USB port on your computer.

We can place the default text inside the

tag:

app.component('son', {
    template: ` < div > < h3 > subcomponents < / h3 > < slot > child components of the default content < / slot > < / div > `
})
Copy the code

Now use the parent component to call:

const app = Vue.createApp({
template: '
 parent 

      
    })
Copy the code

Operation effect:

A named slot

Sometimes more than one slot is required, and the

element has a special feature: name. This feature can be used to define additional slots for example:

app.component('son', {
    template: '<div> <h3> Citizen basic information </h3> <slot> <! -- Name --> </slot> <slot> <! -- Age --> </slot> <slot> <! -- Gender --> </slot> </div> '
})
Copy the code

In this case,

has a special attribute name

app.component('son', {
    template: ` < div > < h3 > citizens basic information < / h3 > < slot name = "name" > name < / slot > < slot name = "age" > age < / slot > < slot name = "sex" > gender < / slot > < / div > `
})
Copy the code

How do you use it? It’s easy to specify the slot name using v-slot on the DOM element:

const app = Vue.createApp({
template: '
 parent component 
 
       
        
        
        
        '
      
    })
Copy the code

Operation effect:

The syntax for v-slot:name can be shortened to #name as follows:

const app = Vue.createApp({
template: '
 parent 
 
       
        
        
        
       '
      
    })
Copy the code

Note: As long as multiple slots appear, all slots use full based?

The scope of the slot

Sometimes it is useful to give slot content access to data that is only available in child components.

Write a child component:

const app = Vue.createApp({
data(){
    return {
       list: ['A'.'B'.'C']}},template: `<div v-for="item in list">{{item}}</div>`
})
Copy the code

If the parent component wants to use a value from the child component slot, it can be passed as a: binding, such as :item=”item”. The code can be written as follows.

const app = Vue.createApp({
data(){
    return {
                list: ['A'.'B'.'C']}},template: ` 
      
 
        
      
`
})
Copy the code

After writing, the parent component is accepted in the form of V-slot =” XXX “. After receiving, it can be used

const app = Vue.createApp({
    template: ` 
       
       {{props.item}} 
       `
Copy the code

Note that the props are subcomponents that pass in data as objects, but you can use any names you like.