How to Create and Handle Custom Events with Vue 3

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to emit and handle custom events with Vue 3.

Custom Events

We can emit custom events with the this.$emit method.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <component-a @increment-count="count++"></component-a>
      <p>{{count}}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            count: 0
          };
        }
      });
      app.component("component-a", {
        template: `
          <div>
            <button @click='this.$emit("increment-count")'>click      me</button>
          </div>`
      });
      app.mount("#app");
    </script>
  </body>
</html>

We emit the increment-count event with the from component-a .

Then we listen to the same event within the parent Vue instance’s template with:

#vue #vuejs #javascript

Custom Events

medium.com

How to Create and Handle Custom Events with Vue 3