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

And the HTML:

<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 diam non mi

blandit dapibus. </p>

<div slot="buttons">

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

primary">Ok</button>

</div>

</modal-window>

Although we won't be utilizing slots with our people listing app, it's good to be aware of

the capabilities of a Vue component. If you wished to use a modal box like this, you can set

the visibility to a variable that is false by default. You can then add a button with a click
method that changes the variable from false to true—displaying the modal box.

Creating a repeatable component

The beauty of components is being able to use them multiple times in the same view. This

gives you the ability to have one single "source of truth" for the layout of that data. We're

going to make a repeatable component for our people list and a separate component for the
filtering section.

Open your people listing code you created in the last couple of chapters and create a new
component titled team-member. Don't forget to define the component before your Vue app

is initialized. Add a prop to the component to allow the person object to be passed in. For

validation purposes, only specify that it can be an Object:

Vue.component('team-member', {

props: {

person: Object

}

});