What is a slot?

In VUE component development, a component can be used in many ways. Slots can pass in their own custom content when using subcomponents to render different interfaces, and of course the same functions can be implemented as well.

Slot base

Slots allow us to compose components like this:

<navigation-link url="/profile">
    Your Profile 
</navigation-link>
Copy the code

And then the navigation link component says this

<a v-bind:href="url" class="nav-link"><slot></slot></a>
Copy the code

When a component is rendered, slot tags are rendered as Your Profile. Slots can contain anything, and can have multiple tags, including HTML content.

<navigation-link url="/profile">
    <h1>Node 1</h1>
    <h1>Node 2</h1>
</navigation-link>
Copy the code

Slot scope

When we want to use data in a slot, the scope is to the parent component and cannot access the data or props of the current component

<navigation-link url="/profile"> Clicking here will send you to: {{ url }} <! Here -`url`Will beundefinedBecause its contents are passed to the <navigation-link> and not defined inside the <navigation-link> component. --> </navigation-link>Copy the code

Because the URL is the props to the navigation-link component, it can only be accessed in the child component.

Note: Everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope.

Set the default slot value

Sometimes it is useful to set up specific backup (that is, the default) content for a slot, which will only be rendered when no content is provided. For example, in a

component

<button type="submit"><slot></slot></button>
Copy the code

We might want the 

<button type="submit"><slot>Submit</slot></button>
Copy the code

Now when I use

in a parent component and do not provide any slot content:

<submit-button></submit-button>
Copy the code

The default content “Submit” will be rendered

<button type="submit">Submit</button>
Copy the code

Instead, we provide content

<submit-button> Save </submit-button>
Copy the code

Submit in the default slot is replaced with Save

A named slot

Sometimes we need multiple slots. For example, for a < Base-layout > component with the following template:

<div class="container"> 
    <header> <! -- We want to put the header here --> </header> 
    <main> <! -- We want to put the main content here --> </main> 
    <footer> <! -- We want to put footer here --> </footer> 
</div>
Copy the code

In such cases, the

element has a special attribute: name. This property can be used to define additional slots so that a component can have multiple slots:

<div class="container"> 
    <header> <slot name="header"></slot> </header> 
    <main> <slot></slot> </main> 
    <footer> <slot name="footer"></slot> </footer> 
</div>
Copy the code

A

without a name defaults to the implied name “default”.

When supplying content to a specific slot, we can use the V-slot directive on a

<base-layout>
    <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>
    
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
    
    <template v-slot:footer>
        <p>Here's some contact info</p>
    </template>
    
</base-layout>
Copy the code

Now everything in the

Note that V-slot can only be added to

Obsolete slot instruction writing

The current V-slot directive can only be added to the

<base-layout>
    <div slot="Header">
        <h1>Here might be a page title</h1>
    </div>
    
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
    
    <section slot="Footer">
        <p>Here's some contact info</p>
    </section>
    
</base-layout>
Copy the code

However, since this directive has been abandoned and is still supported at present, it is still recommended not to use this method.