Adicionar um evento personalizado a um componente

• 7 minutos

Vamos concluir o aplicativo adicionando um formulário. O formulário terá uma lista suspensa para o usuário selecionar a cabine desejada e um botão para reservar o cruzeiro. Você configurará isso como um novo componente e criará um evento para o botão. Você terminará chamando esse novo componente usando Host.vue.

Criar o componente

Comece criando o componente.

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

2. Em BookingForm.vue, digite vue e selecione <vue> com default.vue do menu de snippets.

   

   O snippet criará a estrutura padrão.

Adicionar o código para o componente

Vamos adicionar o código que o componente usará, incluindo o registro de props, emissão, dados e métodos.

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

2. Dentro das chaves ({ }) para export default, adicione o seguinte código para configurar o componente:

   props: {
       cabins: Array,
   },
   emits: ['bookingCreated'],
   data() {
       return {
           cabinIndex: -1
       }
   },
   methods: {
       bookCabin() {
           if(this.cabinIndex < 0) return;
           this.$emit('bookingCreated', this.cabinIndex);
           this.cabinIndex = -1;
       },
   }
   

   Esse código começa criando um prop cabins para exibir a lista de cabines disponíveis. Expomos um evento chamado bookingCreated usando emits. Criamos um item de dados chamado cabinIndex para armazenar o índice de cabines selecionado.

   Terminamos criando um método chamado bookCabin. Esse método verifica o valor de cabinIndex e é executado somente quando o valor é 0 ou maior (indicando que o usuário selecionou uma cabine). Se essa validação for aprovada, emitiremos o evento retornando o cabinIndex selecionado e redefiniremos cabinIndex como -1.

Adicionar o modelo de exibição

Com o código adicionado, podemos voltar nossa atenção à exibição. Queremos ter uma lista suspensa para seleção da cabine e um botão para reservar a viagem. O botão chamará a função bookCabin criada anteriormente.

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

2. Adicione o seguinte código dentro das marcas <template> para criar a exibição:

   <section>
   <h2>Book now!</h2>
   <form>
       <div class="row">
           <label for="cruise-cabin">Select class:</label>
           <select id="cruise-cabin" v-model="cabinIndex">
               <option disabled value="-1">Select a cabin</option>
               <option v-for="(cabin, index) in cabins" :value="index" :key="index">
                   {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
               </option>
           </select>
       </div>
       <div class="row">
           <button class="button" type="button" @click="bookCabin">Book now!</button>
       </div>
   </form>
   </section>
   

   O HTML cria o formulário. Fazemos um loop pelo prop cabins usando v-for para criar a lista suspensa. Associamos o modelo da marca select a cabinIndex, que será retornado quando o usuário selecionar uma cabine e selecionar o botão. Depois, configuramos o botão para chamar bookCabin quando selecionado.

Adicionar BookingForm à página

Conclua adicionando o BookingForm recém-criado ao aplicativo adicionando-o a Host.vue.

1. Abra src/components/Host.vue.

2. Importe BookingForm adicionando o seguinte código após o comentário TODO: Register next component:

   import BookingForm from './BookingForm.vue';
   

3. Adicione BookingForm à lista de componentes disponíveis adicionando o seguinte código após o comentário TODO: Add next component:

   BookingForm
   

4. Adicione o método para manipular o evento personalizado bookingCreated adicionando o seguinte código após o comentário TODO: Add methods:

   methods: {
       addBooking(cabinIndex) {
           const cabin = this.cruise.cabins[cabinIndex];
           const booking = {
               cabin: cabin.name,
               price: cabin.price
           }
           this.bookings.push(booking);
       }
   }
   

   A função addBooking recupera a cabine selecionada usando o índice. Em seguida, a função cria um objeto booking usando cabin.name e cabin.price. Em seguida, adicionamos booking à matriz bookings.

5. Use o componente booking-form adicionando o seguinte código após o comentário TODO: Add booking-form:

   <booking-form @booking-created="addBooking" :cabins="cruise.cabins"></booking-form>
   

   Conectamos a função addBooking ao evento booking-created e passamos a lista de cabines para exibição.

Exibir o tipo cabine

Vamos modificar o modelo para exibir as informações dos nossos manuais. Em vez da mensagem de reserva de "Exemplo" que mostramos no último exercício, exibiremos o tipo cabine para cada reserva.

1. Abra src/components/BookingList.vue.

2. Dentro do elemento <template>, altere o nome do campo em div de booking.name para booking.cabin:

   <div class="row" v-for="(booking, index) in bookings" :key="index">
       <div>{{ booking.cabin }} </div>
   </div>
   

Testar a página

Com todo o código adicionado, vamos testar a página!

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

2. Vá até http://localhost:8080 e atualize a página.

3. Selecione uma cabine na lista suspensa e selecione o botão.

   Sua nova reserva é exibida.

   

Você criou e chamou um componente com um evento personalizado!