Adicionar props a um componente

Concluído

Vamos continuar com a criação do aplicativo criando um componente para exibir a lista atual de reservas. Você adicionará um formulário que o usuário pode usar para adicionar reservas, sendo assim, crie uma matriz estática por enquanto.

Criar o componente

Comece criando o componente.

1. No Visual Studio Code, crie um arquivo chamado BookingList.vue em src/components.

2. Em BookingList.vue, digite vue e selecione <vue> com default.vue no menu de snippet.

   

   O snippet criará a estrutura padrão.

Registrar os props e o valor computado

Estamos esperando uma matriz de informações sobre reservas, então vamos declarar nosso prop como um tipo Array. Como está criando um componente, você também pode aproveitar as propriedades computadas para calcular automaticamente os valores para você. Você adicionará uma propriedade computada para adicionar o preço total e retornar um valor de exibição que você pode usar.

1. Abra src/components/BookingList.vue se ainda não estiver aberto.

2. Dentro das chaves ({ }) para export default, adicione o seguinte código para criar um prop chamado bookings e a propriedade computed:

   props: {
       bookings: Array
   },
   computed: {
       totalDisplay() {
           let totalCost = 0;
           if (this.bookings && this.bookings.length > 0) {
               totalCost = 
                   this.bookings.map(b => b.price)
                               .reduce((a, b) => a + b);
           }
           return '$ ' + totalCost.toLocaleString('en-US');
       }
   }
   

   Observe como totalDisplay pode acessar o prop bookings usando this, que é como poderíamos acessar dados ou outras propriedades declaradas como parte de nosso componente. Criamos o código para calcular o total dos preços listados em bookings e para criar uma exibição de cadeia de caracteres.

Adicionar o modelo para exibição

Vamos adicionar o modelo para exibir as informações de nossas reservas. Você usará v-for para executar um loop em todas as reservas e na propriedade computada totalDisplay criada anteriormente.

1. Abra src/components/BookingList.vue se ainda não estiver aberto.

2. Dentro do elemento <template>, adicione o seguinte HTML:

   <section>
   <h2>
       Here's your current bookings:
   </h2>
   
   <div class="row" v-for="(booking, index) in bookings" :key="index">
       <div>{{ booking.name }} </div>
   </div>
   
   <h3 class="row">
       Total: {{ totalDisplay }}
   </h3>
   </section>
   

   Nosso código itera em todas as reservas com v-for e exibe cabin. Em seguida, chamamos totalDisplay para exibir o custo total das reservas.

Adicionar o componente à página principal

Vamos usar o componente que criamos e passar uma lista de reservas.

1. Abra src/components/Host.vue.

2. Adicione uma nova linha abaixo da marca <script> de abertura e antes de export default.

3. Adicione o seguinte código (incluindo o comentário) para importar o componente BookingList:

   import BookingList from './BookingList.vue';
   // TODO: Register next component
   

4. Registre o componente adicionando o seguinte código (incluindo o comentário) abaixo do comentário TODO: Add components:

   components: {
       BookingList,
       // TODO: Add next component
   
   },
   

   Importante

   As duas vírgulas são necessárias porque adicionaremos mais valores no futuro.

Usar o componente

Com o componente registrado, vamos chamá-lo em nossa página. Usaremos a matriz bookings que criamos anteriormente para propagar a lista de reservas na página.

1. Abra src/components/Host.vue se ainda não estiver aberto.

2. Abaixo do comentário TODO: Add booking-list, adicione o seguinte código para usar o componente booking-list:

   <booking-list :bookings="bookings"></booking-list>
   

Testar a página

Com o componente registrado e configurado, vamos testar a página!

1. Salve todos os arquivos selecionando Arquivo>Salvar tudo.

2. Volte à janela do navegador com http://localhost:8080 e atualize a página.

   A página exibe a reserva de exemplo.

   

Parabéns! Você criou um componente com props.