Since the slot usage was deprecated in vue 2.6, the v-slot usage was added to simplify the previously complicated operation. As a novice, it was confused when he first looked up the document, but after exploring it, he found that it was not difficult. If you are a beginner, I hope this article has been helpful.

1. Default slot, code first

The subcomponent content is

<template id=" CPN "> <div> <h3> Hello slot</h3> // Define a slot< slot></slot> </div> </template>Copy the code

The content of the parent component is

<! V-slot is the default slot, so you can write v-slot on the child component's label, while named slot and scope slot are normally written on the template tag. < CPN v-slot:default> Hello </ CPN > <! Hello slot and hello slot are displayed in the browser -->Copy the code

Since the above code is relatively simple, I will not explain more, but the default slot can also be used as a domain slot, the domain slot can be used to get data from the child component to the parent component, the child component content is not repeated here

<template id="cpn"> <div> <h3>hello</h3> <! <slot :data="pLanguage"></slot> </div> </template>Copy the code

The parent component content is

<! The slot is a default, and the slot is a default. --> < CPN v-slot:default="eat"> {{eat. Data}} </ CPN > <! The hello slot and lPlanguage data are displayed in the browser.Copy the code

In this way, the implementation of the parent component to obtain the child component data content, it should be noted that default is best used when there is only one slot, if there are multiple slots I do not recommend writing this form, there will be many bugs.

2. Named slot

Subcomponent content

  <template id="cpn">
    <div>
      <h3>hello</h3>
      <slot name="bbq1"></slot>
      <slot name="bbq2"></slot>
      <slot name="bbq3"></slot>
    </div>
  </template>
Copy the code

Parent component content

    <cpn>
      <template v-slot:bbq1>
        <h3>BBQ1</h3>
      </template>
      <template v-slot:bbq2>
        <h3>BBQ2</h3>
      </template>
      <template v-slot:bbq3>
        <h3>BBQ3</h3>
      </template>
    </cpn>
Copy the code

Name slots use v-slot: instead of slot= before 2.6, it is better to write v-slot in the template tag. Otherwise, there is no way to control the specific slot if there are multiple slots.

3. Define the domain slot

Subcomponent content

  <template id="cpn">
    <div>
      <h3>hello</h3>
      <slot name="bbq" :data="pLanguage"></slot>
    </div>
  </template>
Copy the code

Parent component content

    <cpn>
      <template v-slot:bbq="eat">
        <h3>{{eat.data}}</h3>
      </template>
    </cpn>
Copy the code

In the domain slot, the child component needs to give a custom name and then an identity. In the example above, the child component needs to give a custom name to data=”pLanguage”. PLanguage is data content, which is basically the same as the domain usage of default. V-slot: BBQ =”eat”, in the template tag, otherwise multiple slots will not recognize or error, v-slot: followed by the value of name in the child component, eat is the custom name. The v-slot shorthand is implemented with #, which replaces v-slot: with #. The colon also needs to be removed, that is, the shorthand cannot be used in the case of v-slot=. That’s the end of this article, if it’s helpful to you that’s great. Because of my low level, please correct my mistakes. Thank you. I’m studying the props for deconstructing slots. I really don’t understand it. I’ll add it later.