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

This article mainly shows you "vue how to conditionally render slot", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to conditionally render slot" this article.

Render slot conditionally

Each Vue component has a special $slots object that contains all the slot. The default slot has default keys, and named slot uses their names as keys:

Const $slots = {default:, icon:, button:,}

But this $slots object only applies to the slot of the component, not each defined slot.

Take this component that defines several slot as an example, including several named slot:

Here are some slots

If we apply only one slot to the component, only that slot will appear in our $slots object:

This will apply to the second slot $slots = {second:}

We can use it in our components to detect which slot has been applied to the components

For example: by hiding the wrapper element of slot:\

Slot of a package

Now div, the wrapper that applies the style only appears when we actually populate the slot with something.

If we don't use slot if we don't have a div, we'll end up getting an empty and unnecessary one. Depending on the style of the div, this can mess up our layout and make things look strange.

Why do we want to be able to render slot conditionally?

There are three main reasons for using conditional slot:

When using wrapper div to add default styles

Slot is empty

When we combine default content with nested slot

For example, when we add a default style, we add a div around the slot:

This is a pretty great component, amirite? Click me!

However, if the parent component does not apply the content to the slot, we will eventually render an empty:\ on the page div

This is a great component Click me!

V-if adds it to the wrapper div to solve the problem. What is not applied to slot? Like this:\

This is a great component Click me! The above is all the content of the article "how vue conditionally renders slot". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.