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

diam non mi blandit dapibus. </p>

</modal-window>

We can now specify and direct our content to specific places.

The last thing you can do with slots is specified a default value. For example, you may want

to display the buttons in the footer most of the time, but want to have the ability to replace

them if desired. With a , any content placed between the tags will be displayed

unless overwritten when specifying the component in your app.

Create a new slot titled buttons, and place the buttons in the footer inside. Try replacing

them with some other content.

The template becomes:

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>

<slot name="buttons">

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

primary">Save changes</button>

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

secondary" data-

dismiss="modal">Close</button>

</slot>

</div>

</div>

</div>

</div>`,