Vue detailed explanation of slots to increase component scalability

This article brings you relevant knowledge about vue, which mainly introduces the issues related to slots that increase the scalability of components. The slots of components are also to make our encapsulated components more functional. Extensibility allows users to decide what content to display inside the component. Let’s take a look at it. I hope it will be helpful to everyone.

【Related recommendations: javascript video tutorial, vue.js tutorial】

slot slot

The slot of the component

• The slot of the component is also to make our packaged components more scalable sex.

• Allows users to decide what content inside the component should be displayed.

How to encapsulate this type of component? slot

They also have many differences, but they also have many commonalities.

If we encapsulate a component individually, it is obviously inappropriate: for example, if each page is returned, we will have to encapsulate this part of the content repeatedly.
However, if we encapsulate it into one, it seems unreasonable: some are menus on the left, some are return, some are search in the middle, some are text, etc.

How to encapsulate it appropriately?

Extract commonalities and retain differences.

The best way to encapsulate is to extract commonalities into components and expose differences as slots.
Once we reserve the slot, the user can decide what content to insert in the slot according to their own needs.
Is it a search box, text, or menu. It's up to the caller to decide.

Basic use of slot

• In the sub-component, you can use special elements to open a slot for the sub-component.
• What is inserted into this slot depends on how the parent component is used.

With a simple example, define a slot for a subcomponent:
<slot></slot>The content in For other content, the content will be displayed by default

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮</button></cpn>
        <cpn><span>aaaaa</span></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

Named slot slot

When the function of the sub-component is complex, the slot of the sub-component may not be a .

For example, if we encapsulate a subcomponent of a navigation bar, we may need three slots, representing the left, middle, and right respectively. So, when inserting content into the slot, how to distinguish which one is inserted?

How to use named slots?

• Just give the slot element a name attribute
• <slot name="myslot"></slot>

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮1</button></cpn>
        <cpn><span>aaaaa</span>
            <button>按钮2</button></cpn>
    </div>
    <template>
        <div>
            <h2 id="我是子组件">我是子组件</h2>
            <h3 id="hahaha">hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

Scope slot

Essence:

The parent component replaces the label of the slot, but the content is provided by the child component.

Requirements:

The subcomponent includes a set of data, such as: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C ']
Need to be displayed on multiple interfaces:

• Some interfaces are displayed one by one in the horizontal direction
• Some interfaces are displayed in list form
• Some interfaces directly display an array

The content is in the child component, and you want to display it in the parent component:

• Use the slot scope to insert Slot

When the parent component uses our child component, get the data from the child component:

• Through <template slot-scope="slotProps"></template>Get the slotProps attribute
• You can get the data we just passed in throughslotProps.data

<div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>

<template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

nbsp;html>



    
    
    
    <script></script>



    <div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>
    <template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

【Related recommendations: javascript video tutorial, vue.js tutorial】

The above is the detailed content of Vue detailed explanation of slots to increase component scalability. For more information, please follow other related articles on the PHP Chinese website!