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

This paper has participated inProject DigginTo win the creative gift package and challenge the creative incentive money

About the slot

Idle time to have a tight mind, busy time to have leisure fun

directory

  • preface

  • The body of the

    • What is a slot?
    • Anonymous slot
    • Name slot
    • 4. Scope slot

  • conclusion

  • Reference documentation

preface

Returns the directory

When implementing component polymorphic reuse, we usually pass some data to the component through props for the component to present. However, in order to make this component more universal, we prefer that some of the structure of our component can also be customized by the user, rather than only customize the data, that is, define some placeholder elements in advance, and the specific structure is determined by the component caller.

For this purpose, Vue.js implements a content distribution API called Slot.

The body of the

What is a slot?

Returns the directory

Slots are placeholders. It gives your HTML template a place in the component and lets the outside world decide what elements and content to display. Website actually speak very detailed, slot | Vue. Js

  • If the external passes in the contents of the slot, the external incoming contents are displayed

  • If no external data or elements are passed in, no render is performed (default slot values will be displayed if default slot values are set)

Slots are divided into anonymous slots, named slots, and scoped slots.

With Vue3 (actually from 2.6), we introduced a new uniform syntax for named slots and scoped slots (i.e., v-slot directives). It replaces slot and slot-scope

Usage scenarios

Slots allow users to extend components to better reuse and customize them. If the parent uses a reusable component, retrieving that component differs from place to place. Slot slots can be used to pass content to a specific location inside a component for different uses.

For example, in dialogs, some exchange boxes require buttons and some do not. In this case, slot slots can be used as placeholders. If a button is sent to the exchange box, it will display the button; if not, it will not display the button.

Anonymous slot

Returns the directory

The default slot is determined by the slot tag. The default content can be placed in the slot tag. If the parent component does not insert content as specified in the slot, the default content is used.

Example:

  1. The child componentsDefaultSlots.vueUse anonymous slots in<slot>
  <div class="my_content">
      <p>I'm the default slot</p>
      <! -- use slot as placeholder -->
      <! External callers decide what to store -->
      <slot>
          <! -- This default content will only be displayed if no insert content is provided -->
          <p>Here's the default</p>
      </slot>
  </div>
Copy the code
  1. In the parent componentDefaultSlots.vueTo import, register, and use child componentsDefaultSlotsAnd pass the corresponding content to the slot
<template> <h1>SlotDemo</h1> <div> <div> I am the parent component </div> <! -- Using anonymous slots --> <DefaultSlots> <p> The content passed in by the parent component </p> </DefaultSlots> </div> </template> <script> import DefaultSlots from '@/components/DefaultSlots.vue'; export default { name: 'SlotDemo', components: { DefaultSlots, }, }, }; </script>Copy the code

The rendered result looks like this:

Name slot

Returns the directory

Sometimes we need multiple slots, and we need to pass different content to each slot. If the default slot is still used, something like this:

  <div class="my_content">
      <p>I'm the default slot</p>
      <slot />
      <slot />
      <slot />
  </div>
Copy the code

This will only cause the content passed by our parent element to be repeated, as shown below:

This is where the name plug comes in handy.

The

element has a special attribute: name. By giving each slot a name, we can make them correspond to what we want to insert.

note

  • One without a name slot>The exit will carry an implied namedefault.

When feeding content to a named slot, we can use the V-slot directive on a

Example:

  1. The child componentsNamedSlots.vueUse named slots for each<slot>Take onename.Tell them about your happiness…And, of course,nameIt can also be dynamic and specified by a parent component.
<template> <div class="my_content"> <p> I am named slot </p> <! <slot name="header"> <p> <slot name="main"> <p> <slot name="main"> Footer </p> </slot> </div> </template> <script> export default {name: 'NamedSlots', props: { slotName: String, }, }; </script>Copy the code
  1. In the parent componentDefaultSlots.vueTo import, register, and use child componentsNamedSlots, and pass the corresponding content to the slot, and usev-slot:To specify the name of the slot that the content belongs to. Of course, we can also use abbreviations#To replace thev-slot:.
  <! -- Use named slot -->
  <NamedSlots :slotName="slotName">
      <! -- Unnamed content will not be matched by named slot -->
      <p>The content passed in by the parent component</p>
      <template v-slot:header>
          <p>Header passed in by the parent component</p>
      </template>
      <! -- Like v-on and v-bind, v-slot has an abbreviation that replaces everything before the argument with the character # -->
      <template #main>
          <p>The parent component passes in Main</p>
      </template>
      <! -- v-slot:[dynamicSlotName] -->
      <template# [slotName] >
          <p>Footer passed by the parent component</p>
      </template>
  </NamedSlots>
Copy the code

The rendered result looks like this:

4. Scope slot

Returns the directory

Compile scope

Have you ever wondered: when you want to use data in a slot, do you bind data to the parent component or to the child component?

Assume the template is:

<child-component>
    {{message}}
</child-component
Copy the code

The answer is the parent component, because their compile scope is different

Component scope is simply:

  • The contents of the parent component template are compiled in the parent component scope;
  • The content of the subcomponent template is compiled in the subcomponent scope.

So what do we do if we want the slot content to have access to data that is only available in the child components? This is where the scope slot comes in handy.

This type of slot allows the parent component to use the data of the child component, as long as the child component uses v-bind (or:) to its own data in the slot, and then the parent component can receive the data with V-slot =”slotProps” when using the component.

Example:

  1. Child components are used in slotsv-bind(or:) bind its own data
<template> <div class="my_content"> <h3> I am the scope slot </h3> <! -- Bind the child component's data MSG as an attribute of the <slot> element. Properties bound to <slot> elements are called slot prop. A slot prop can pass a slot caller for use. --> <slot :msg="msg" /> </div> </template> <script> export default { name: 'ScopedSlots', data() { return { msg: 'Msg in Child', }; }}; </script>Copy the code
  1. Used in the parent componentv-slot="slotProps"receiveSlot prop, you can use it directly. Note: hereslotPropsIt can be customized.
<template> <h1>SlotDemo</h1> <div> <div> I am the parent component </div> <! --> <ScopedSlots> <! // All data passed to the slot caller (slot prop) is stored in slotScope as key-value pairs // In this case slotScope is {MSG: 'Msg in Child'}, so we can also directly deconstruct the slot Prop, such as v-slot="{Msg}" // note: SlotScope is just the name of a variable, -> <template v-slot="slotScope"> <p>{{slotscope.msg}}</p> </template> </ scope slots > </div> </template>  <script> import ScopedSlots from '@/components/ScopedSlots.vue'; export default { name: 'SlotDemo', components: { ScopedSlots, }, data() { return { msg: 'Msg in father', }; }}; </script>Copy the code

The rendered result looks like this:

conclusion

Returns the directory

With your mutual encouragement, for their own refueling!

Reference documentation

  • Slot | Vue. Js
  • Vue3 learning – the parent-child communication component and slot | the nuggets – coderwxf
  • Vue slot in the slot of the usage and application scenario | the nuggets – JDragon

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address

Document agreement

Db’s document library is licensed by DB under the Creative Commons Attribution – Non-commercial use – Share alike 4.0 International License. Based on works on github.com/danygitgit. Outside of this license agreement authorized access can be from creativecommons.org/licenses/by… Obtained.