Shulou(Shulou.com)06/02 Report--

This article will explain in detail what anonymous slots and named slots are in Vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Slot, also known as slot, is the content distribution mechanism of Vue, and the template engine within the component uses the slot element as the exit to host the distribution.

Slot slot is a template tag element of a child component, and whether and how this tag element is displayed is determined by the parent component.

Slot is divided into three categories: default slot, named slot and scope slot. (the first two are mentioned here)

The essence of the slot is that the slot is essentially an expansion of the sub-component, passing the content to the "specified location" within the component through the slot.

1. Anonymous slot

Default slot: also known as anonymous slot, when the slot does not specify a name attribute value, a default display slot, there is only one anonymous slot in a component.

For example:

First create a Vue instance and mount it to the div whose id is app

/ / Root component (parent component, also known as base component) let vm = new Vue ({el:'#app',})

Before creating a local component, define the slot in the component, and the slot must be placed in the subcomponent

/ / declare partial component let child = {template: `

I am a sub-component

I have a line of words.

This is the content of placeholder `}

Define local components in the center of the subcomponents in the vm instance and render them at the view layer

/ / Root component (parent component, also known as base component) let vm = new Vue ({el:'#app', / / child components (registry) components: {/ / key-value pair, child}} can be omitted when the key and value are the same)

When no content is delivered, the (default) content of the slot is displayed

We pass the content into the slot in the view layer:

This is a content.

When there is content delivered in the past, the (default) content of the slot is not displayed.

Note: when you want to pass content in the view layer to the slot, you must have a slot in the subcomponent, otherwise it will not be displayed!

When you have multiple anonymous slots in the subcomponent, the delivered content will be placed in each slot:

Template: `

I am a sub-component

I have a line of words.

This is the placeholder content, this is the first content, the second content.

two。 Named slot

When defining the slot in the sub-component, give the corresponding slot a name to facilitate the insertion of the parent component to fill the corresponding content according to the name.

First give the slot a name in the sub-component (anonymous slots actually have a default name, default, which can be omitted):

Template: `

I am a sub-component

I have a line of words.

This is placeholder content, this is T1 placeholder content, this is T2 placeholder content, this is T3 placeholder content, and this is T4 placeholder content`

The method of using named slots

1. In the sub-component, you should first define the slot and name it.

two。 In the view layer in the parent component, on a tag, add a slot attribute to the tag

This property can be assigned the name of a specific slot.

This is the first content, and the second content I'm going to use in the named slot T1, I'm going to use it in the named slot T2, I'm going to put it in the named slot T3, and I'm going to put it in the named slot T3.

This is the end of the article on "what are anonymous slots and named slots in Vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.