Ah, have written a lot of gold bug (must blame others!!) Cause my writing to disappear! So angry! All right! Without further ado, the slot in the real development of the use of a lot of, online plus I now say are relatively basic things, but at least to understand the slot! Let ·s go!

1. What is a slot?

Let me briefly describe a scenario to understand slots and their usage scenarios, such as ha! There is a module where everything is the same except for one small area where things are displayed differently! As shown below, how would you like to write this requirement at this point? 1. How many states write how many components?? 2. Write directly on the page?? (If the module is complex, it is quite difficult to maintain) 3.?Copy the code

Finished thinking, huh? Ok, I don’t know what you think!! It doesn’t matter! Let’s use the slot! Just write one child and multiple parents. Practice writing one parent! Just use the child components a few times!

(I'll just write it in the new way, so I don't say anything about waste, it doesn't make sense!)

Sub-component code:Parent component code:

This example calls anonymous slots and named slots!

1. Anonymous slot:

Just write a <slot></slot> placeholder in the child component! Any parent component that doesn't have a fixed name will be shown here with # XXX to give it a fixed nameCopy the code

2. Named slot

In short! As opposed to anonymous slots, the child component uses the placeholder <slot name=" XXX "><slot>, and the contents after the # in the parent component are displayed in the placeholder.Copy the code

Ok!!!!! A named/anonymous slot doesn’t make any sense. It’s easy! Let’s talk about scope slots!!

Scope slot

What is a scoped slot? Put it this way! What if the parent component wants to use the child component’s data? What to do?

1. Use $emit to send the value to the parent component? You can! But there’s no need, it’s too complicated 2. Scope slots!

The parent component

Child components

This screenshot shows both anonymous and named scope slots.

When writing to a name-scope slot, # XXX is omitted from the parent component and cannot coexist with v-slot!

Ok!!!!! Whether you understand it or not! That’s it for now. I get it anyway!