Use slot to distribute content

What is a slot?

In order for components to be composable, we need a way to mix the content of the parent component with the child component’s own template. This process is called content distribution, and vue.js implements a content distribution API that uses special ‘slot’ elements as slots for the original content.

Scope for compilation

Before diving into the content distribution API, let’s clarify in which scope the content is compiled. Assume the template is:

<child-component>
{{message}}
</child-component>
Copy the code

Should Message be bound to the parent component’s data or to the child component’s data? The answer is the parent component. The component scope simply says: The content of the parent component template is compiled in the parent component scope. The content of the subcomponent template is compiled in the subcomponent scope.

Usage of a single slot

Page shows

Usage of named slots (specific names)

Scope slot

The contents of name are not available.