Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the slot in Vue is and how to use it, the content is detailed and easy to understand, the operation is simple and fast, and it has certain reference value. I believe you will gain something after reading this Vue slot and how to use it. Let's take a look at it.

In Vue, slot is a very powerful function, which can greatly enhance the flexibility of encapsulated components. For example, if you use a slot when encapsulating a component, then when the parent component calls, the content here can be freely defined by the parent component, without having to think about how to cover various usage scenarios when encapsulating the component.

Base slot

Suppose we now have a component SlotComponent that needs to be encapsulated

This is a slot: content from the parent component

The content in the slot can be defined arbitrarily in the parent component. If there are no elements in the component, the content between the start and end tags of the component will be lost when the parent component invokes.

Since the slot is in the SlotComponent component, can the data in the SlotComponent component be used when called in the parent component? Obviously not, because they don't have the same scope.

Everything in the parent template is compiled in the parent scope; everything in the child template is compiled in the child scope.

Default content of slot

The slot can also set the default content, which is a bit like the default value of the function parameter in es6, which is rendered when the parent component calls without providing the content. If content is provided, it replaces the default content.

This is the default content of slot

No content is provided between the tags when the call is made, and the default value is rendered as a background content.

Named slot

If I need to use slots in multiple places in the component, I need to add name to the slot to distinguish where the content is rendered.

/ / named slot, the name is NamedSlot, this is the named slot / / called in the parent component, this is the content of inserting slot1, this is the content of inserting slot2, this is the content of inserting slot3.

After adding the name attribute to the slot, you can distribute the content in the form of v-slot:slotName. If the name attribute is not given, the default name is default, which is equivalent to v-slot:default, or it can be abbreviated to # default.

Note that v-slot can only be added on, but there are special cases, which we'll talk about later.

How the slot accesses the sub-component content

With slot, we can add content to the parent component for the child component, but the scope of the parent component is different, so what should we do if we want to use the data of the child component in the parent component?

You can bind properties on child component elements with the value of what you need to pass to the parent component.

/ / the subcomponent name is SlotProp / / call {{slotProps.value1}} {{slotProps.value2}}

To put it simply, bind a value on slot in the form of: key='value'

When called by the parent component, the slotProps name can be defined by getting this value in the form of "slotProps".

Then use slotProps [key] to get this value.

If the component has only one default template, you can write v-slot directly on the component name instead of writing "slotProps" on the template.

{{slotProps.value1}}

As mentioned above, if name is not specified, it is considered to be default, and the same is true here. Vmurslotplace default = "slotProps" can be abbreviated to Vmurslott = "slotProps".

Deconstruction of slotProps

The inner workings of scope slots are to include the contents of your slots in a function that passes in a single argument

Based on the principle of slot implementation, we can also use some ES6 syntax to manipulate slotProps, such as deconstructing, prop renaming and assigning default values.

/ / deconstruct {{value1}} / / rename value1 to name1 {{name1}} / / assign the default {{value1}} dynamic slot name

Slot supports dynamic slots in this way.

Sometimes multiple slot are inserted in a loop in a base component, such as this

When calling, you can use dynamic slot name + loop to dynamically render the corresponding slot.

{{item}} this is the end of the article on "what slots in Vue are and how to use them". Thank you for reading! I believe you all have a certain understanding of the knowledge of "what is the slot in Vue and how to use it". If you want to learn more, you are welcome to follow the industry information channel.

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.