Vue.js 2 Cookbook

How it works...

Normally, after creating a component, it is inserted in the template as a simple tag. In some cases, you put some props or other attributes, but you don't put anything inside. With slots, you are expected to put stuff inside your component in their parent's template. We usually write the following:

<div id="app">   <framed></framed> </div>

However, since the framed component has a slot inside his template and we put some HTML inside it, it is as follows:

<div id="app">   <framed>     <cat :name="catName"></cat>   </framed> </div>

The final render will contain the framed component with the cat component instead of the slot.

Actually, if we don't put anything inside, the default content will appear. The default content is defined ...