Vue's slot content distribution

Content distribution uses special <slot>elements as slots for original content. Assuming that the parent component needs some DOM in the child component, then the DOM is displayed, not displayed, where to display, and how to display, which is the responsibility of slot distribution.

Single slot

You can place the parent component in the content of the child component and place it where you want it to be displayed; the
parent component is placed in the position of the child component and the content of the child component is inserted in the <slot></slot>position of the child component

Named slot

Put the different html tags in the child component in different locations, the parent component adds slot="name名"attributes to the label to be distributed ; the
child component adds attributes to the slot tag corresponding to the distribution position name="name名", and then the corresponding label is placed Corresponding position

<div class="swiper-pagination"  slot="pagination"></div>

Scope of content distribution

Determined according to the template.
Although their children tag subassembly included, but since the inner template properties are not subassembly, and therefore does not belong to the sub-assembly, by the parent component controls
the compiler art SUMMARY parent component template parent element acts; content subassembly template in the sub Compilation within component scope

No content distributed

If the parent component does not place a label in the child component, or the parent component places a label in the child component but has a slot attribute, and the child component does not have a label with the slot attribute, the slot label of the child component will not play any role.
Unless there is content in the slot tag, the content in the slot tag will be displayed when there is no distribution content

Guess you like

Origin blog.csdn.net/zn740395858/article/details/76131636