What is the use of vue.js slot?

The functions of vue.js slot: 1. Display the label and receive it through [58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee] 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 58cb293b8600657fad49ec2c8d37b472&lt inside the component. ;/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:

b84296f4d3789c396ce298cea37e3f1adc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b2 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 slot5f58ed85131415ffe3d862526695a9307971cf77a46923278913ee247bc958ee

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!