Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

1. Slot chestnut

When we encapsulate a component, we might run into a situation where the functionality of the component is what we need but the UI is not what we need

In this case, slot slots are needed

A simple chestnut

Sub-components 🙁<navigation-link>You may write 🙂 in the template

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

Parent component use

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

When the component is rendered,
will be replaced with “Your Profile”. The slot can contain any template code, including HTML:

<navigation-link url="/profile"> <! Add a Font Awesome icon --><span class="fa fa-user"></span> 
    Your Profile 
</navigation-link>
Copy the code

Even other components:

<navigation-link url="/profile"> <! Add an icon component --><font-awesome-icon name="user"></font-awesome-icon> 
    Your Profile 
</navigation-link>
Copy the code

But if the <navigation-link> 的 templateDoes not contain one<slot>Element, and anything between the component’s start tag and end tag is discarded.

2. Backup content (I also like to call it default content)

Adding content to the slot every time is also troublesome to die, in our development time is not always the same function, and the UI display is completely different, where there is demand, there is demand to better production

Backup content came into being:

Subcomponent: submit-button.vue

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

The parent component uses:

Now when I use

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

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

The backup content “Submit” will be rendered;

But if we provide content:

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

The content “Save” provided by the parent component will be rendered to replace the backup content

3. 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

For such cases, the element has a special attribute: name. This attribute can be used to define additional 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

exit without a name carries the implied name default.

When feeding content to a named 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

Of course, you can be more specific

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

Either way, it will render:

<div class="container"> 
    <header> 
        <h1>Here might be a page title</h1> 
    </header> 
    <main> 
        <p>A paragraph for the main content.</p> 
        <p>And another one.</p> 
    </main> 
    <footer>
        <p>Here's some contact info</p>
    </footer> 
</div>
Copy the code

The effect is as follows:

Here might be a page title

A paragraph for the main content.

And another one.

Here’s some contact info

— — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — — — — — — — — —

By the way, the color is due to the style of the Nuggets, don’t get me wrong

Note that V-slot can only be added to

4. Scope slot

Sometimes it is useful to give slot content access to data that is only available in child components.

However, when our child renders in the parent, the data supplied to the slot must be the parent’s

Like this

Child components:

<span> 
    <slot>{{ user.lastName }}</slot>
</span>
Copy the code

We might want to replace the alternate:

Like this:

<current-user> {{ user.firstName }} </current-user>
Copy the code

FirstName is the parent component’s user.firstname, not the child component’s user.firstname. In order to make user available in the parent’s slot content, We can bind user as an attribute of the

element:

<span>
    <slot v-bind:user="user"> {{ user.lastName }} </slot> 
</span>
Copy the code

Attributes bound to

elements are called slot prop. Now in parent scope, we can define the name of our supplied slot prop using v-slot with a value:

<current-user> 
    <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> 
</current-user>
Copy the code

In this example, we chose to name the object that contains all the slotProps slotProps, but you can use any name you like.

Of course, v-slot:default === V-slot is also available

However, in multiple cases, v-slot:default is required instead of V-slot

Note that the default slot abbreviation syntax should not be mixed with named slots, as it would result in undefined scope

Whenever multiple slots are present, always use the full

<current-user> 
    <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> 
    <template v-slot:other="otherSlotProps"> {{ otherSlotProps.user.firstName }} </template> 
</current-user>
Copy the code

5. Abbreviations for named slots

Like v-on and v-bind, v-slot has an abbreviation that replaces everything before the argument (v-slot:) with the character #. For example, v-slot:header can be rewritten as #header:

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

However, as with other instructions, this abbreviation is only available if it has arguments. This means that the following syntax is invalid:

<! -- This will trigger a warning --><current-user# ="{ user }"> {{ user.firstName }} </current-user>
Copy the code

If you want to use abbreviations, you must always specify the slot name instead:

<current-user #default="{ user }"> {{ user.firstName }} </current-user>
Copy the code

conclusion

We learned various ways to use Solt

  • The default slot
  • A named slot
  • Scope slot
  • Named slot abbreviation

Like a thumbs-up!! Beg the