Analysis of slot usage cases
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.
