Vue.js 2 Web Development Projects

Components inside components

Now that we know how to write Single-File Components, we want to use them inside other components to compose the interface of the app.

To use a component inside another component, we need to import it and expose it to the template:

1. First, create a new component. For example, here's a Movie.vue component:

      <template>        <li class="movie">          {{ movie.title }}        </li>      </template>      <script>      export default {        props: ['movie'],      }      </script>      <style scoped>      .movie:not(:last-child) {        padding-bottom: 6px;        margin-bottom: 6px;        border-bottom: solid 1px rgba(0, 0, 0, .1);      }      </style>

We will also need a Movies.vue component if you haven't created it already. It should look like this:

<template>  <ul class="movies"> <li v-for="movie of ...