Optimizing your App and Using Components to Display Data Chapter 3}
});
We should be able to expand on this example when we make theperson component of our
listing app.
Passing data to your component – slots
There are times when you may need to pass chunks of HTML to your component that are
not stored in a property or that you want to format before appearing in the component.
Rather than trying to pre-format in a computed variable or similar, you can use slots with
your component.
Slots are like placeholders and allow you to place content between the opening and closing
tags of your component and determine where they are going to display.
A perfect example of this would be a modal window. These normally have several tags and
often consist of a lot of HTML to copy and paste if you wish to use it in your application
multiple times. Instead, you can create a modal-window component and pass your HTML
with a slot.
Create a new component titled modal-window. This accepts one prop of visible, which
accepts a Boolean value and is false by default. For the template, we'll use the HTML
from the Bootstrap modal as a good example of how a component using slots can easily
simplify your application. To ensure the component is styled, make sure you include the
bootstrap asset files in your document:
Vue.component('modal-window', {
template: `<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
primary">Save changes</button>
<button type="button" class="btn btn-
secondary" data-dismiss="modal">Close