Computer scienceFrontendVue.jsVue 3 SyntaxVue Components

Emitting events

Counter component

Report a typo

Below, you see a Vue component named Counter, which was created using the Composition API. The component displays a number and has a button. When you click this button, it triggers an event known as 'increment' in the parent component. The parent component listens for this event and increments its own counter value by one. However, the increment function does not have one line of code:

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import {ref} from 'vue';

const emit = defineEmits(['increment']);

const counter = ref(0);

const increment = () => {
  counter.value++;
  // missing line
};
</script>

Select the missing line of code for this function.

Select one option from the list

this.$emit('increment');

emit('increment');

this.counter = 0;

emit('decrease');

___

Create a free account to access the full topic