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

This article mainly introduces the relevant knowledge of "slot use case analysis". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this "slot use case analysis" article can help you solve the problem.

Use slot scenario 1:

Sub-component Minput.vue

Parent component Minput

Can you display it?

In this case, the text in the Minput tag will not be rendered.

What if you want to render the text in it now?

Easy to use slot

Sub-component

In this way, the text in the parent component can be rendered.

Scenario 2: named slot

Sub-component he.vue

Parent component

Helloworld

The rendered result is

Helloworld

Scene 3

Sub-component child

This is H2.

This is a distribution and is displayed only if there is no distribution.

Parent component

This is a paragraph p

Two-stage p

Just render it.

This is H2.

This is a paragraph p

Two-stage p

If the parent component

Then what is rendered is

This is H2 and this is the distribution, which is displayed only if there is no distribution.

Scenario 4: scope slot

Parent component

Hellofromparent

{{props.text}}

If X is rendered, it is.

Hellofromparent

Hellofromchild

This is the end of the content of "slot usage case Analysis". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.