[Vue] play with the slot

Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 6 God , Click to see the event details .

stay Vue in , Slot is a very powerful function , It can greatly enhance the flexibility of encapsulated components , For example, you use a slot when encapsulating a component , When the parent component is called , The content here can be freely defined by the parent component , There is no need to think hard about how to cover various usage scenarios when encapsulating components .

Base slot

Suppose we now have a component that needs to be encapsulated SlotComponent

<template>
  <div> This is a slot：<slot> </slot></div>
</template>
 Copy code 

<SlotComponent> Content from parent component </SlotComponent>
 Copy code 

stay slot The content in can be defined arbitrarily in the parent component . If not in the component <slot> Elements , Then when the parent component calls , The content between the start and end tags of the component will be lost .

since slot Is in SlotComponent In the component , Can it be used when calling in the parent component SlotComponent The data in the component ？ Obviously not , Because they are in different scopes .

Everything in the parent template is compiled in the parent scope ; Everything in the sub template is compiled in the sub scope .

Default content for slot

The slot can also set the default content , It's a bit like es6 The default value of the function parameter in , When the parent component calls, no content is provided , Then the default value will be rendered . If the content is provided , Will override the default content .

<template>
  <div>
    <slot> This is a slot Default content of </slot>
  </div>
</template>
 Copy code 

<DefaultSlot></DefaultSlot>
 Copy code 

There is no content provided between tags at the time of invocation , The default value is to render , Become a cover story .

A named slot

If I need multiple slots in the component , Then we need to give slot add to name, To distinguish where the content is rendered .

// named slot, Name is  NamedSlot
<template>
  <div>
     This is a named slot 
    <div>
      <slot name="slot1"></slot>
    </div>
    <div>
      <slot name="slot2"></slot>
    </div>
    <div>
      <slot name="slot3"></slot>
    </div>
  </div>
</template>

//  Invoke in parent component 
<NamedSlot>
    <template v-slot:slot1> This is insert slot1 The content of </template>
    <template v-slot:slot2> This is insert slot2 The content of </template>
    <template v-slot:slot3> This is insert slot3 The content of </template>
</NamedSlot>
 Copy code 

to slot add name After attribute , Can pass v-slot:slotName Distribute content in the form of . Do not give name Attribute words , By default name by default, Equate to v-slot:default, It can also be abbreviated as #default.

Be careful ,v-slot Can only be added to <template> On , But there are special cases , I'll talk about it later .

How do slots access the contents of subcomponents

adopt slot, We can add content for child components in the parent component , But the scope of parent-child components is different , What should we do if we want to use the data of child components in the parent component ？

Can be found in sub components <slot> Binding attribute on element , The value is what you need to pass to the parent component .

//  Child components   The component name is  SlotProp
<div>
    <slot name="slot1" :value1="child1"></slot>
    <slot name="slot2" :value2="child2"></slot>
</div>
// call 
<SlotProp>
  <template v-slot:slot1="slotProps">
    {{ slotProps.value1 }}
  </template>
  <template v-slot:slot2="slotProps">
    {{ slotProps.value2 }}
  </template>
</SlotProp>
 Copy code 

Simply speaking , Is in the slot through :key='value' Bind a value in the form of ,

When the parent component calls , adopt v-slot:slotName="slotProps" Get this value in the form of ,slotProps Names can be defined by themselves ,

Re pass slotProps[key] Go get this value .

If the component has only one default template , Yes, you don't have to template Write on v-slot:slotName="slotProps" Of , You can write... Directly on the component name v-slot

<SlotProp v-slot:default="slotProps">
    {{ slotProps.value1 }}
</SlotProp>
 Copy code 

As mentioned above , Not specified name Would be considered to be default , It's the same here ,v-slot:default="slotProps" It can be abbreviated as v-slot="slotProps".

slotProps Deconstruction of

The internal working principle of the scope slot is to include the contents of your slot in a function passing in a single parameter

Implementation principle based on slot , We can also use some ES6 To operate slotProps, such as deconstruction ,prop rename and Assign default etc. .

//  deconstruction 
<SlotProp v-slot="{ value1 }">
    {{ value1 }}
</SlotProp>

//  rename , take  value1  Rename it to  name1
<SlotProp v-slot="{ value1: name1 }">
    {{ name1 }}
</SlotProp>

//  Assign default 
<SlotProp v-slot="{ value1 = ' This is the default ' }">
    {{ value1 }}
</SlotProp>
 Copy code 

Dynamic slot name

slot Supported by <template v-slot:[dynamicSlotName]> This way to achieve dynamic slot .

Sometimes multiple... Are inserted in a loop in a basic component slot , Such as this

<div v-for="item in slotList" :key="item">
      <slot :name="item"></slot>
</div>
 Copy code 

When calling, you can use Dynamic slot name + loop To dynamically render the corresponding slot

<template v-for="item in slotList" v-slot:[item] >
    {{item}}
</template>
 Copy code