This is the 8th day of my participation in the August Text Challenge.More challenges in August

In this article, we will discuss how to use v-slot and what we need to be aware of when using it.

How to use

V-slot combines the

element to provide named slots or slots that need to receive prop. V-slot is shorthand for # and can only be used in

Based on using

Suppose we define a component my-button as:

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

In the slot element, we can either give a default value (the default value is displayed when using the component without passing content, otherwise the default value will be replaced), or we can leave it empty and just
. So how do we use this component, as follows:

<my-button>1. Put nothing here and display the default value after compiling. 2. You can put any template code or component here</my-button>
Copy the code

In addition, it is important to note that everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope. That is, the contents of the
wrapper cannot access the my-button scope.

A named slot

Sometimes we need more than one slot. The

element has a special attribute: name. We can use this attribute to write the slot you want.

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

When the attribute name does not exist, the

exit carries the implied name “default”. So how do we use it, as follows:

<base-layout>/ / using v - slot<template v-slot:header>
    <h1>The name of the slot is header</h1>
  </template>// The default slot can not be written v-slot:default, but if the abbreviation is used, it needs to be written #default<template #default>
    <p>You don't need to write it for V-slot</p>
    <p>Use #default for abbreviations</p>
  </template>// Use the abbreviation #<template #footer>
    <p>abbreviations</p>
  </template>
</base-layout>
Copy the code

Scope slot

To enable slot content to access data only available in child components, we can use an action on slot.

usage

A single slot assumes that the component todo-list is:

<ul>
  <li v-for="(item, index) in items">
    <slot :item="item" :index="index"></slot>
  </li>
</ul>
Copy the code

We can use it in two ways:

  1. v-slotActs on components
<todo-list v-slot="slotProps">//slotProps is an object that contains all properties bound to the slot except name, for example, slotProps is a variable that can be named with any name<span>{{slotProps.item}}</span>
</todo-list>
Copy the code

Our example is the default slot. If the example is a named slot, such as slot name=”header”, we would use it like this:

<todo-list v-slot:header="slotProps">
    <span>{{slotProps.item}}</span>
</todo-list>
Copy the code
  1. v-slotApplies to slot wrap elementstemplateon
<todo-list>// Be sure to wrap it with template because V-slot can only be used in templates or components<template v-slot="slotProps">
        <span>{{slotProps.item}}</span>
    </template>
</todo-list>
Copy the code

If the component gives a named slot, use the same method as 1.

Multiple slots

In this case, v-slot can only be used on the slot-wrapped element template, assuming the component todo-list is:

<ul>
  <li v-for="(item, index) in items">
    <slot name="slot1" :item="item" :index="index"></slot>
    <slot name="slot2" :item="item" :index="index"></slot>
    <slot name="slot3" :item="item" :index="index"></slot>
  </li>
</ul>
Copy the code

The usage method is as follows:

<todo-list>
    //slot1
    <template v-slot:slot1="slotProps">
        <span>{{slotProps.item}}</span>
    </template>
    
    //slot2
    <template v-slot:slot2="slotProps">
        <span>{{slotProps.item}}</span>
    </template>
    
    //slot3
    <template v-slot:slot3="slotProps">
        <span>{{slotProps.item}}</span>
    </template>
</todo-list>
Copy the code

Deconstructing slot Prop

We know that slotProps is an object, so we can deconstruct the slot when we use it. Let’s take the named slot of 1 as an example:

<todo-list v-slot:header="{item,index}">
    <span>{{item}} {{index}}</span>
</todo-list>or<todo-list v-slot:header="{item:x,index:y}">
    <span>{{x}} {{y}}</span>
</todo-list>
Copy the code

The dynamic slot

Dynamic command parameters can also be used to define dynamic slot names for V-slots. This means that you can dynamically change the slot contents according to your requirements, as follows:

<base-layout>
  <template v-slot:[dynamicSlotName] >.</template>
</base-layout>
Copy the code

Suppose you have three slots, but you only want to show the contents of one slot at a time, then we can do this with dynamic slots.

Matters needing attention

Vue3 unifies normal and scoped slots. When using the render function, h, the slot is defined as a child object of the current node, as follows:

h(LayoutComponent, {}, {
  header: () = > h('div'.this.header),
  content: () = > h('div'.this.content)
})
Copy the code

Vue3 is not used the same way as Vue2 when you need to programmatically refer to a scoped slot. In Vue3 they are now unified into the $slots option, using the following:

/ / 2 x syntax
this.$scopedSlots.header

/ / 3. X syntax
this.$slots.header()
Copy the code

conclusion

  1. Using dynamic slots gives us more flexibility to switch between complex content in the same area.

  2. In Vue3 you can put code snippets in

  3. Named slot and deconstructed slot Prop both allow me to better fulfill the requirements, and we can use them reasonably according to our own situation.

For more articles, the portal has opened: Look back at the Vue3 catalogue!