A Minimalist approach to Practically Understand VueJS Custom Events.

Know this before you read further:

1. This post assumes that you've started your VueJS learning journey and can atleast setup VueJS along with basic knowledge about vue directives(v-if, v-for, etc.)
2. Along with custom events - $emit(), This post can help you understand how to create a basic modal based on Vue transitions. Also check my blog post VueJS Transitions for Beginners to get an overview of VueJS Transitions
3. Link to the GIthub Repo for this tutorial.

What are Vue Custom Events?

Basically a custom event is like a mediator for you to perform an event under a components hood and transfer its effects/consequences to another component. Thus allowing you to manipulate data from some another component.

Lets dive into our practical example:

To make things clearer The App Component has the data that we are manipulating. And Its being manipulated from the Modal Component.

Basically we are emitting an event from the Modal to the App Component. Let's understand this now...

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <h2>😨 Are you sure you want to do this?</h2>
          <p>Please note your actions.</p>
          <div class="modal-buttons">
            <button @click="addOneMod">Add One</button>
            <button @click="subOneMod">Sub One</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Modal",
  methods: {
    addOneMod() {
      this.$emit("addOneMod");
    },
    subOneMod() {
      this.$emit("subOneMod");
    } } };
</script>

1. Whenever the buttons are clicked a method is being called, using the v-on/@ event handler directive.
2. The Methods have been defined explicitly in the methods for the Modal Components script and the Custom event syntax is used in their definition.
3. Note that Custom Event names are case-sensitive.
4. This methods therefore act as a mediator.

Doing this has now enabled us to Listen for this Custom Event when we use this component in another component. As Below...

Things will be clearer once I reveal our App Component:

<template>
  <div id="app">
    <Modal v-if="showModal" @subOneMod="subOne" @addOneMod="addOne" :num="num" />
    <div class="container">
      <button v-if="!showModal" @click="showModal = !showModal" class="viewModal">Click Me !!!</button>
      <div class="show-number">{{num}}</div>
    </div>
  </div>
</template>

<script>
import Modal from "./components/Modal.vue";

export default {
  name: "App",
  data() {
    return {
      showModal: false,
      num: 0
    };  
  },
  components: {
    Modal
  },
  methods: {
    addOne() {
      this.num++;
      this.showModal = false;
    },
    subOne() {
      this.num--;
      this.showModal = false;
    } } };
</script>

1. Here we are in our App Component and have used our Modal Component.
2. And We're listening to the Custom Event we emitted from there use @subOneMod="method-here" and @addOneMod="method-here".
3. By listening to this Custom event we are triggering a method that manipulates the data in the App Component where the data is present.

End

I hope you find it helpful/intuitive enough to read till the end, and if you do so please consider sharing It with others.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

The Credits For the example in this Post solely belong to Shahid Shaikh

GoodBye, You're a Genius, and an Artist. Never stop learning