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: