This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Slot, beginner’s nightmare, and I have a nightmare, but business development to write more, back to the summary of the time, found that is no more than this.

The problem

27. Explain your understanding of vUE slots

No matter how complex a Vue component is, it consists of three parts: Prop, Event, and Slot.

Slots are just part of the Vue component.

A slot, commonly known as a slot slot, occupies a slot in a component template. When the component label is used, the contents of the component label are automatically filled in (replacing the slot position in the component template).

I also saw an understanding that made me suddenly understand the analogy between slot and prop:

js -> prop

html -> slot

Both prop and Slot can be understood as external parameters. Prop passes JS code, and slot passes HTML code. The ultimate goal is for the parent component to control the child component to do something, but prop controls JS logic. Slot controls HTML structure and style.

Basic use of slot

<base-content> qwer </base-content>
Copy the code

If you write HTML directly inside a custom component, this will not take effect.

Slots are needed to insert HTML into slot tags within components.

<div> <slot></slot> </div>Copy the code

A named slot

A component can have multiple slots, distinguished by the name attribute of the slot tag.

The parent component adds content by slot=”name” (old syntax), V-slot :name, or #name (new syntax) :

Within sub-components:  <div class="base-content"> <slot name="header"></slot> <slot name="main"></slot> <slot name="footer"></slot> </div>Copy the code
Inside the parent component: <base-content> <div slot="header"> I'm header</div> <template #main> I'm main</template> <template V-slot :footer> I am footer</template> </base-content>Copy the code

28. Can the parent use the child’s data in the form of slots?

Direct use cannot, use scope slot can

Direct use of

<div class="base-content"> <slot></slot> </div> data() {return {innerContent: 'qwer'}}Copy the code
Parent: <base-content> {{innerContent}} </base-content>Copy the code

Error:

The reason is:

Everything in the parent template is compiled in the parent scope; Everything in a subtemplate is compiled in a subscope. – vue document

Scope slot

Within sub-components:  <div class="base-content"> <slot name="header" :innerContent="innerContent"></slot> </div> data() { return { InnerContent: 'I'm innerContent'}}Copy the code
<base-content> <template V-slot :header="headerData">{{headerdata.innerContent}}</template> </base-content>Copy the code

This is very similar to using props as a reference, except that it is passed to the parent from the slot tag of the child component and received within the parent via v-slot.

Note that scope slots were previously written as slot-scope, which was deprecated in version 2.6.0. Write slots are best used with V-slot.

29. $slots 和 $scopedSlotsWhat is it for?

They are all attributes on vue instances:

$slots is used to access content distributed by slots.

$scopedSlots is used to access the scope slots.

These two properties are useful for determining slot usage within a child component,

For example, the following two pieces of code are taken from the Alert and Tree components of Element-UI.