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

This article mainly explains "what slots are there in vue". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what slots are in vue.

There are three kinds of slots in vue: 1, default slot, syntax "; 2, named slot, syntax"; 3, scope slot, syntax "".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

There are three main types of slots (slot) for vue:

Default slot, named slot, scope slot

A slot in vue, which refers to a placeholder in a child component that is provided for use by the parent component

In terms of tags, the parent component can populate this placeholder with any template code, such as HTML, components, and so on, and the populated content replaces the child component's tag (replacement placeholder).

Default slot

The default slot is the simplest slot, as described above, to change the contents of the child component in the parent component by replacing the placeholder.

Syntax:

Place a placeholder (slot) in the subcomponent:

Sasha lost weight export default {name: 'chassList'}

Then reference the child component in the parent component and populate the placeholder (slot) with contents:

What to eat today: sister-in-law won't let Sasha eat.

At this time, the content of the page will be [what to eat today: Sasha's sister-in-law does not allow Sasha to eat].

Named slot

For example, if there are two placeholders to be replaced in the child component (two slot), if the parent component wants to fill the corresponding slot, there is no way to judge which slot the corresponding content should be filled into by the default slot. In order to deal with such situations, named slots emerge as the times require.

A named slot actually gives a name to the slot in the child component, and the parent component can be seated according to this name and fill the corresponding slot with the corresponding content when the child component is referenced.

Syntax:

Place two named slots in the subassembly:

First slot, second slot export default {name: 'chassList'}

Reference the child component in the parent component, and populate the corresponding content into the appropriate slot by v-slot: [name]:

Two slots: one, two

The content of the page will be [two slots: the first slot one, the second slot two].

Considerations for using default and named slots

1. If there are multiple default slots in the child component, all padding assigned to the default slot in the parent component (no named slot is specified) is populated into each default slot in the child component.

two。 Even if the filling order of the named slot is disrupted in the parent component, as long as the name of the named slot corresponds, the filled content can be correctly rendered to the corresponding named slot, one radish and one pit.

3. If both a default slot and a named slot exist in the subcomponent, but the named slot specified in the parent component cannot be found in the subcomponent, the content is discarded directly instead of being populated into the default slot.

Scope slot

Scope slots are more difficult to understand and use than the previous default slots and named slots.

The first two slots emphasize the filling space [position].

Scope slots emphasize the role of data [scope]

Scope slots, which are slots with parameters (data)

The parameter (data) in the slot of the child component is provided to the parent component, and the parameter (data) is valid only in the slot, and the parent component can customize the display content according to the slot parameters (data) passed from the child component.

Syntax:

Place a slot with parameters (data) in the subcomponent:

The parameter value in the slot is export default {name: 'classList', data () {return {isAllwo: {one:' one', two: 'two'}

Reference the child component in the parent component and accept the parameters passed in the slot of the child component and use the data through slot-scope.

Scope slot: {{isAllwo.isAllwo.one}}

The content displayed on the page will be [scope slot: the parameter value in the slot is one].

Because expressions are supported in template {{}}, the page content can be customized by using the different values of the parameters passed by the subcomponents.

Scope slot: {{isAllwo.isAllwo.one | | 'null'}}

At this point, if the parameter passed in the subcomponent is null, the display content of the page will be [scope slot: the parameter value in the slot is null].

Scope slots are used in a variety of scenarios, and they are also widely used in various frameworks. For example, customizing the display content of a row or column of a table in ElementUI is a typical application scenario of scope slots.

At this point, I believe you have a deeper understanding of "which slots are in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.