What is the use of vue.js slot?

The functions of vue.js slot: 1. Display the label and receive it through [] inside the component; 2. Name the slot to increase the flexibility of the slot; 3. Slot with parameters, use the data in the slot to use the data inside the component.

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

The role of vue.js slot:

1. Basic usage

If some other labels are nested inside the component label, these labels cannot be displayed. If you want to display them, pass <slot>&lt inside the component. ;/slot></slot>To receive, slot will receive and display all tags at the same position

2. Named slot (named slot)

Benefits: It can increase the flexibility of the slot

Add the slot attribute to the tag within the component tag. The attribute value is the slot name:

<div slot="slotName"></div>

Received by name inside the component:

<slot name="slotName"></slot>

3. Scope slot: slot with parameters

When using component tags, if you need to use the data in the slot to use the data inside the component, you need Add:

<template scope="props"><div></div></template> in the component tag to receive the component passed The data is passed through props.val (this val attribute comes from the attribute bound to the slot inside the component)

For example:

　　<List>
　　　　<template scope="props"><div>{{props.val}}</div></template>
　　</List>

Internal component: Binding properties within the slot<slot :val="message"></slot>

Related free learning recommendations: JavaScript (video)

The above is the detailed content of What is the use of vue.js slot?. For more information, please follow other related articles on the PHP Chinese website!