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< 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:

Received by name inside the component:

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:

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:

Internal component: Binding properties within the 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!