We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to publish this job!

Login or register
to save this job!

Login or register
to save interesting jobs!

Login or register
to get access to all your job applications!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel ๐Ÿš€.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Login or register
to save articles!

Login to see the application

Engineers who find a new job through JavaScript Works average a 15% increase in salary ๐Ÿš€

You will be redirected back to this page right after signin

Blog hero image

What is Vue Emit?

Ezekiel Lawson 7 January, 2022 | 4 min read

Introduction

While It is strongly advised that you record all events emitted by each of your components. Vue $emit is a function that lets us emit, or send, custom events from a child component to its parent. because it is used to notify the parent component that something changed, It facilitates communication not only between the child and parent components, but also between sibling components who are separated., and it is the best way to trigger certain events.

Goal

Vue $emit can be used in a variety of ways in your code. But in this article, I'm going to explain what Vue Emit is and we'll explore how to use the vue $emit() function to handle custom emitted events, with a code example as well.

Prerequisites

This article assumes you have a basic understanding of Vue JS. But you don't need any prior experience handling custom emitted events as this tutorial will give you an in-depth explanation of what Vue $emit function is and how to handle custom emitted events.

This article will cover the following:

  • Brief Intro to Vue Js
  • Installation and Setup
  • What is Vue $Emit?
  • How does Vue $Emit work?
  • Handling Custom events with vue $emit function
  • Conclusion

Brief Intro to Vue Js

Vue is a user interface framework written in JavaScript. Its basic element is mostly concerned with the view layer, and it is quite simple to comprehend.

Installation and Setup

The following approach covers how to set your project or install Vue js. since we won't be working with any library in our application, let's move on to the installation of Vue Js.

Now, create your new Vue project with the following command:

vue create vue-custom-event

After that, navigate to the project in your terminal and start the Vue development server as follows:

Npm run serve

This will start the development server for our Vue project at the following port:

http://localhost:8080/

Here is the output of our application

vue-custom-event.png

What is Vue Emit?

Vue $emit is a function that lets us emit, or send, custom events from a child component to its parent. In a standard Vue flow, it is the best way to trigger certain events.

How does Vue Emit work?

The $emit function, to put it another way, allows us to send functions as props. Let's start by looking at how to create a custom event in Vue.js and then how to listen to it. In Vue.js, The following is the syntax for firing an event:

this.$emit('eventName')

We must be cautious when giving the event a name in this syntax since we will later listen to the event using the same name. We may listen to this event in the same way that we would listen to a click event in Vue.js. As an example

 <BlogContent @displayData="fetchData"/>

We can write any expression in the inverted commas as well as a function. So, to better grasp it, let's look at a basic example.

Handling Custom Event with Vue $Emit function

Example

We will build a basic blog post to explain this part in this example.

Assume we have a parent component called BlogPage that has a child component called BlogContent to which we are passing the blog title and content via props.

<template>
  <section id="BlogPage">
    <BlogContent
          title="Introduction to CSS"
          content="CSS is a stylesheet language used to style the structure of our document"
        />
  </section>
</template>

<script>
import BlogContent from './components/BlogContent.vue'

export default {
name: 'BlogPage',
components: {
BlogContent
}
}
</script>

In the BlogContent component which is the child component, we are using props to show the title and content of our blog in the h1 and p tag.

<template>
  <section id="BlogPage">
    <h1 class="title-text">{{ title }}</h1>
    <p class="content-text">{{ content }}</p>
  </section>
</template>
// JS File
<script>
export default {
  name: "BlogContent",
  props: ["title", "content"],
};

</script>

After you've set up these two components, you're ready to go. Let's add a button to show more of our content. To accomplish this, we'll first create a button, and then call the displayContent method, which will show us more of the topic you're interested in reading about. Following the creation of the button, the HTML for the BlogContent would look like this:

<template>
  <section id="BlogPage">
    <h1 class="title-text">{{ title }}</h1>
    <p class="content-text">{{ content }}</p>
    <button v-on:click="displayContent" class="text-link">See More</button>
  </section>
</template>

Thereafter, in our method object displayContent, we build a function that will show more of the content that the readers want to see, and we name the event displayData and give it the data that we want it to display in our blog. That's all there is to it when it comes to triggering an event in Vue Js.

<script>
export default {
  name: "BlogContent",
  props: ["title", "content"],
  data() {},
  methods: {
    displayContent() {
      this.$emit("displayData", this.title);
    },
  },
};
</script>

In the preceding code example, we saw how to trigger an event, but there is still one thing missing: we need to listen to the event. In this example, we will create a function fetchData that returns the data's result. Next, we'll assign the given string to the result variable.

<script>
import BlogContent from "../components/BlogContent.vue";
export default {
  name: "BlogPage",
  components: {
    BlogContent,
  },
  data: () => ({
    result: "",
  }),
  methods: {
    fetchData(data) {
      this.result = data;
    },
  },
};
</script>
<template>
  <section id="BlogPage">
    <h1 class="heading-text">Welcome to my Blog</h1>
    <div class="parent-container">
      <div class="Card-body">
        <BlogContent
          title="Introduction to CSS"
          content="CSS is a stylesheet language used to style the structure of our document"
          @displayData="fetchData($event)"
        />
      </div>
      <div class="Card-body">
        <BlogContent
          title="What is $Emit in Vue Js"
          content="Vue $emit is a function that lets us emit, or send, custom events "
          @displayData="fetchData($event)"
        />
      </div>
      <div class="Card-body">
        <BlogContent
          title="Understanding Currying"
          content="Currying simply means evaluating functions with multiple arguments"
          @displayData="fetchData($event)"
        />
      </div>
      
    </div>
      <h4 class="result-text">Result: {{ result }}</h4>
  </section>
</template>

Next, we will bind the result variable in the template inside the BlogContent somewhere to see our data.

<h4 class="result-text">Result: {{ result }}</h4>

Now, let's see what our application looks like on the browser Shopper.gif

In the output above, we can see the prop is displaying the title and content of our blog. Now if we click on the button to see more it displays the title of the blog.

Check out the demo

Conclusion

We covered how to emit custom events in Vue.js in this article. and include a step-by-step example with a brief explanation to help you understand it. Hopefully, this post has provided you with a better understanding of what Vue $Emit is and how to handle custom events in Vue.js.

Author's avatar
Ezekiel Lawson
I'm Lawson Ezekiel, a software developer who has more development experience in frontend building responsive website sites using these web technologies like Javascript, VueJs, HTML and CSS, Bootstrap Tailwind CSS. And I love teaching and sharing my technical experience through an article.

Related Issues

open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 4
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 4
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 5
  • Intermediate
  • HTML
open-editions / corpus-joyce-ulysses-tei
open-editions / corpus-joyce-ulysses-tei
  • Started
  • 0
  • 1
  • Intermediate
  • HTML

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GitHubStart with Stack OverflowStart with Email