A brief discussion on how to use slots in Vue

A brief discussion on how to use slots in Vue

How to define and use:

Use the slot tag definition in the component's template. The default display value can be defined in the middle of the slot tag. If the slot tag does not declare a name attribute value, it will be placed from the first slot down by default when using the slot. For ease of use, a name attribute value is generally specified for the slot. When you want to use the slot, you only need to add slot='slot name' to the tag you want to use, and you can put the specified tag in the specified slot. The slot can be any content.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>slot practice</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>Parent Component</h2>

            <cpn>

                <!-- Add an element to the specified slot position -->

                <button slot="left">Button</button>

                <input type="text" slot="right" placeholder="This is an input box..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>Subcomponents</h2>

            <!-- Define three slots in the subcomponent, and the values ​​in the slots are default values-->

            <slot name="left">Left</slot>

            <slot name="mediate">Medium</slot>

            <slot name="right">Right</slot>

        </div>

    </template>

    <script>

        new Vue({

            el:'#app',

            components:{

                cpn:{

                    template:'#cpn',

                }

            }

        })

    </script>

</body>

</html>

The effect is as shown below:

analyze:

In the above example, three slots are defined in the child component and given specific name attribute values. When the parent component calls the child component, a button is placed in the slot named left in the child component, and an input box is placed in the slot named right. From this we can see that by using slots, components can have more extensions. The content in the slot can be anything. Defining a slot is equivalent to digging a hole for the component in advance, and then calling it when it is used later.


This is the end of this article about the usage of slots in Vue. For more information about the usage of slots in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue scope slot details, slot, v-slot, slot-scope
  • About Vue's slot distribution content (multiple distributions)
  • Basic usage specifications of slots in Vue2
  • Detailed explanation of Vue slot
  • Detailed explanation of the use of slots in Vue

<<:  Using the outline-offset property in CSS to implement a plus sign

>>:  Implementation of master-slave replication in docker compose deployment

Recommend

Implementation of nginx multiple locations forwarding any request or accessing static resource files

This article mainly introduces the implementation...

Detailed explanation of installing applications in Linux Centos7 without Internet connection

1. In the previous chapter, we learned that we ca...

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

First, let me briefly introduce what MySQL is; In...

Detailed explanation of the use of Vue's new built-in components

Table of contents 1. Teleport 1.1 Introduction to...

Copy fields between different tables in MySQL

Sometimes, we need to copy a whole column of data...

MySQL string splitting example (string extraction without separator)

String extraction without delimiters Question Req...

Detailed explanation of three ways to configure Nginx virtual hosts (based on ports)

Nginx supports three ways to configure virtual ho...

MySQL tutorial DML data manipulation language example detailed explanation

Table of contents 1. Data Manipulation Language (...

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Last night I wrote an essay about the browser ren...

Tutorial on installing Microsoft TrueType fonts on Ubuntu-based distributions

If you open some Microsoft documents with LibreOf...

Detailed explanation of Nginx static file service configuration and optimization

Root directory and index file The root directive ...

Example analysis of MySQL startup and connection methods

Table of contents How to start mysqld Method 1: m...

In-depth understanding of JavaScript callback functions

Table of contents Preface Quick Review: JavaScrip...

How to implement digital paging effect code and steps in CSS

A considerable number of websites use digital pagi...

The main idea of ​​​​dynamically setting routing permissions in Vue

I have seen some dynamic routing settings on the ...