Detailed explanation of anonymous slots and named slots in Vue

1. Anonymous slots
2. Named slots
Summarize

Slot, also known as slot, is Vue's content distribution mechanism. The template engine inside the component uses the slot element as the outlet for carrying distributed content.

A slot is a template tag element of a child component, and whether or not this tag element is displayed and how it is displayed is determined by the parent component.

Slots are divided into three categories: default slots, named slots, and scoped slots. (Here we are talking about the first two)

The essence of slots is that slots are essentially extensions of subcomponents, and content is delivered to the "specified location" inside the component through the <slot> slot.

1. Anonymous slots

Default slot : also known as anonymous slot, a default display slot when the slot does not specify a name attribute value. There is only one anonymous slot in a component.

Example:

First create a Vue instance and mount it on the div with id app

<div id="app">
 
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
 
        // Root component (parent component, also called base component)
        let vm = new Vue({
            el:'#app',
        })
    </script>

When creating a local component, define the slot in the component. The slot must be placed in the child component.

 // declare local component let child = {
            template:`
            <div>
                <p>I am a subcomponent</p>
                <p>I am a line of words</p>
                <slot>This is a placeholder</slot>
            </div>
            `
        }

Define the local component in the subcomponent center of the vm instance and render it in the view layer

  // Root component (parent component, also called base component)
        let vm = new Vue({
            el:'#app',
 
            // Subcomponents (registration center)
            components:{
                // Key-value pair, child can be omitted when the key and value are the same
            }
        })

<div id="app">
 
        <!-- Using components -->
        <child></child>
    </div>

When no content is passed, the (default) content of the slot is displayed.

We pass content to the slot in the view layer:

 <!-- Using components -->
        <child>
            <h1 style="color: aqua;">This is a content</h1>
        </child>

When content is passed, the (default) content of the slot will not be displayed.

Note: To pass content to the slot at the view layer, there must be a slot in the child component, otherwise it will not be displayed!

When you have multiple anonymous slots in a child component, the passed content is placed into each slot separately:

 template:`
            <div>
                <p>I am a subcomponent</p>
                <p>I am a line of words</p>
                <slot>This is a placeholder</slot>
                <slot></slot>
                <slot></slot>
            </div>
            `

<child>
            <h1 style="color: aqua;">This is the first content</h1>
            <h1 style="color: red;">This second content</h1>
        </child>

2. Named slots

When defining slots in child components, give the corresponding slots a name to facilitate the subsequent insertion of parent components to fill the corresponding content according to the name.

First, give the slot a name in the child component (the anonymous slot actually has a default name, default, which can be omitted):

 template:`
            <div>
                <p>I am a subcomponent</p>
                <p>I am a line of words</p>
                <slot name="default">This is a placeholder</slot>
                <slot name="t1">This is the content of t1 placeholder</slot>
                <slot name="t2">This is the content of t2 placeholder</slot>
                <slot name="t3">This is the content of t3 placeholder</slot>
                <slot name="t5">This is the content of t4</slot>
            </div>
            `,

Methods using named slots

1. Define the slots in the subcomponent and give them a name

2. In the view layer of the parent component, on a tag, add the slot attribute to the tag

This property can be assigned the name of the specific slot

 <child>
            <!-- At this time, these two sentences are still placed in the anonymous slot-->
            <h1 style="color: aqua;">This is the first content</h1>
            <h1 style="color: red;">This second content</h1>
 
                <!-- slot="t1" specifies the slot to put the content in -->
            <h2 style="color: blue;" slot="t1">I want to use it in the named slot t1</h2>
            <h3 style="color: green;" slot="t2">I want to use it in the named slot t2</h3>
            <h4 style="color: orange;" slot="t3">I want to put it in the named slot t3</h4>
            <h5 style="color: pink;" slot="t4">I want to use it in the named slot t4</h5>
        </child>

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Understanding and example code of Vue default slot
Basic usage examples of Vue named slots
Vue uses slots to distribute content operation examples [single slot, named slot, scoped slot]
Detailed explanation of how to use Vue anonymous, named and scoped slots
Detailed explanation of the usage of scoped slots in Vue.js slots
About VUE's compilation scope and slot scope slot issues
Detailed explanation of Vue scope slot implementation method and function
Vue default slot, named slot, scope slot definition and usage

<<: CSS solves the misalignment problem of inline-block

>>: Solution to Incorrect string value in MySQL