search
HomeBackend DevelopmentPHP TutorialVue component communication: using $emit and $on for custom event communication
Vue component communication: using $emit and $on for custom event communicationJul 08, 2023 pm 07:09 PM
vue component communication custom event

Vue component communication: Use $emit and $on for custom event communication

In Vue applications, component communication is a very important part. Through component communication, we can pass data, trigger events, etc. between different components. The Vue framework provides a variety of ways to communicate between components. One of the common ways is to use $emit and $on for custom event communication.

In Vue, each component can trigger a custom event through the $emit method and pass data to other components. Other components can listen to this custom event through $on and execute corresponding logic when the event is triggered.

Let's look at a simple example, assuming we have two components: one is the parent component Parent, and the other is the child component Child. We hope that when the button of the child component is clicked, the parent component will be notified to perform corresponding processing.

First, we need to define a button in the subcomponent and trigger a custom event when the button is clicked:

<template>
  <button @click="sendData">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('customEvent', { data: 'hello' });
    }
  }
};
</script>

In the above code, the subcomponent defines a button and in In the click event of the button, a custom event named 'customEvent' is triggered through this.$emit, and an object containing data { data: 'hello' } is passed.

Then, in the parent component, we need to listen to this custom event and execute the corresponding logic when the event is triggered. We can use this.$on in the parent component's life cycle hook function created to listen to this custom event:

<template>
  <div>
    <p>{{ message }}</p>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
};
</script>

In the above code, the parent component first introduces the child component ChildComponent and uses it in the template tag to reference child components. Then, in the created life cycle hook function, listen to the 'customEvent' event triggered by the subcomponent through this.$on, and specify the callback function to be executed when the event is triggered as handleCustomEvent. In handleCustomEvent, we can get the data passed from the subcomponent and process it accordingly.

Now, we have completed the communication between the child component and the parent component. When the button of the child component is clicked, the 'customEvent' custom event is triggered and the data is passed to the parent component through this.$emit. After the parent component receives the data, it will be saved in the message variable and displayed in the template.

In addition to using this.$on to listen to custom events, we can also use this.$once to listen to custom events, so that after the event is triggered once, the monitoring will be automatically removed. In addition, Vue also provides this.$off method to manually remove the listener.

Summary:
Custom event communication through $emit and $on is a common component communication method in Vue. We can trigger a custom event and pass data through this.$emit in the sending component, and then listen to the custom event through this.$on in the receiving component and execute the corresponding logic when the event is triggered. This approach can help us achieve flexible communication between components and improve code reusability and maintainability.

The above is the sample code and instructions for using $emit and $on for custom event communication. I hope it can help you better understand and apply Vue component communication.

The above is the detailed content of Vue component communication: using $emit and $on for custom event communication. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
11 Best PHP URL Shortener Scripts (Free and Premium)11 Best PHP URL Shortener Scripts (Free and Premium)Mar 03, 2025 am 10:49 AM

Long URLs, often cluttered with keywords and tracking parameters, can deter visitors. A URL shortening script offers a solution, creating concise links ideal for social media and other platforms. These scripts are valuable for individual websites a

Working with Flash Session Data in LaravelWorking with Flash Session Data in LaravelMar 12, 2025 pm 05:08 PM

Laravel simplifies handling temporary session data using its intuitive flash methods. This is perfect for displaying brief messages, alerts, or notifications within your application. Data persists only for the subsequent request by default: $request-

Build a React App With a Laravel Back End: Part 2, ReactBuild a React App With a Laravel Back End: Part 2, ReactMar 04, 2025 am 09:33 AM

This is the second and final part of the series on building a React application with a Laravel back-end. In the first part of the series, we created a RESTful API using Laravel for a basic product-listing application. In this tutorial, we will be dev

Simplified HTTP Response Mocking in Laravel TestsSimplified HTTP Response Mocking in Laravel TestsMar 12, 2025 pm 05:09 PM

Laravel provides concise HTTP response simulation syntax, simplifying HTTP interaction testing. This approach significantly reduces code redundancy while making your test simulation more intuitive. The basic implementation provides a variety of response type shortcuts: use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

cURL in PHP: How to Use the PHP cURL Extension in REST APIscURL in PHP: How to Use the PHP cURL Extension in REST APIsMar 14, 2025 am 11:42 AM

The PHP Client URL (cURL) extension is a powerful tool for developers, enabling seamless interaction with remote servers and REST APIs. By leveraging libcurl, a well-respected multi-protocol file transfer library, PHP cURL facilitates efficient execution of various network protocols, including HTTP, HTTPS, and FTP. This extension offers granular control over HTTP requests, supports multiple concurrent operations, and provides built-in security features.

12 Best PHP Chat Scripts on CodeCanyon12 Best PHP Chat Scripts on CodeCanyonMar 13, 2025 pm 12:08 PM

Do you want to provide real-time, instant solutions to your customers' most pressing problems? Live chat lets you have real-time conversations with customers and resolve their problems instantly. It allows you to provide faster service to your custom

Announcement of 2025 PHP Situation SurveyAnnouncement of 2025 PHP Situation SurveyMar 03, 2025 pm 04:20 PM

The 2025 PHP Landscape Survey investigates current PHP development trends. It explores framework usage, deployment methods, and challenges, aiming to provide insights for developers and businesses. The survey anticipates growth in modern PHP versio

Notifications in LaravelNotifications in LaravelMar 04, 2025 am 09:22 AM

In this article, we're going to explore the notification system in the Laravel web framework. The notification system in Laravel allows you to send notifications to users over different channels. Today, we'll discuss how you can send notifications ov

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools