Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Optimizing your App and Using Components to Display Data Chapter 3

Viewing the Bootstrap HTML, we can see there is space for a header, body, and footer. We

can identify these sections with named slots. This allows us to pass specific content to
specific areas of our component.

Create two new tags in the header and footer of the modal window. Give these

new ones a name attribute, but leave the existing one empty:

template: `<div class="modal fade" v-

show="visible">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<slot name="header"></slot>

<button type="button" class="close" data-

dismiss="modal" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

<div class="modal-body">

<slot></slot>

</div>

<div class="modal-footer">

<slot name="footer"></slot>

<button type="button" class="btn btn-

primary">Save changes</button>

<button type="button" class="btn btn-

secondary" data-

dismiss="modal">Close</button>

</div>

</div>

</div>

</div>`,

In our app, we can now specify what content goes where by specifying a slot attribute in

the HTML. This can either go on a specific tag or a container around several tags. Any

HTML without a slot attribute will also default to your unnamed slot:

<modal-window :visible="true">

<h1 slot="header">Modal Title</h1>

<p>Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Suspendisse ut rutrum ante, a

ultrices felis. Quisque sodales diam non mi

blandit dapibus. </p>

<p slot="footer">Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Suspendisse ut

rutrum ante, a ultrices felis. Quisque sodales