Detailed explanation of Vue slot

1. Function : Allows the parent component to insert HTML structure into the specified position of the child component. It is also a way of communication between components and is applicable to parent component ===> child component (HTML format is transmitted).

Parent component App:

Subcomponent Category:

You can set the style of the content in the slot in the parent component or the child component, and the effect is the same

Scoped slots:

1. Understanding: The data is in the component itself ( Category ), but the structure generated by the data needs to be determined by the user of the component (APP). (The games data is in the Category component, but the structure traversed using the data is determined by the App component)

The child component passes data to the parent component

son:

father:

Using an object like atguigu to receive is because multiple values ​​may be passed

Scoped slots can also have names:

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!