search
HomeBackend DevelopmentPHP TutorialVue component communication: using $emit and $on for custom event communication

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

Jul 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
How can you check if a PHP session has already started?How can you check if a PHP session has already started?Apr 30, 2025 am 12:20 AM

In PHP, you can use session_status() or session_id() to check whether the session has started. 1) Use the session_status() function. If PHP_SESSION_ACTIVE is returned, the session has been started. 2) Use the session_id() function, if a non-empty string is returned, the session has been started. Both methods can effectively check the session state, and choosing which method to use depends on the PHP version and personal preferences.

Describe a scenario where using sessions is essential in a web application.Describe a scenario where using sessions is essential in a web application.Apr 30, 2025 am 12:16 AM

Sessionsarevitalinwebapplications,especiallyfore-commerceplatforms.Theymaintainuserdataacrossrequests,crucialforshoppingcarts,authentication,andpersonalization.InFlask,sessionscanbeimplementedusingsimplecodetomanageuserloginsanddatapersistence.

How can you manage concurrent session access in PHP?How can you manage concurrent session access in PHP?Apr 30, 2025 am 12:11 AM

Managing concurrent session access in PHP can be done by the following methods: 1. Use the database to store session data, 2. Use Redis or Memcached, 3. Implement a session locking strategy. These methods help ensure data consistency and improve concurrency performance.

What are the limitations of using PHP sessions?What are the limitations of using PHP sessions?Apr 30, 2025 am 12:04 AM

PHPsessionshaveseverallimitations:1)Storageconstraintscanleadtoperformanceissues;2)Securityvulnerabilitieslikesessionfixationattacksexist;3)Scalabilityischallengingduetoserver-specificstorage;4)Sessionexpirationmanagementcanbeproblematic;5)Datapersis

Explain how load balancing affects session management and how to address it.Explain how load balancing affects session management and how to address it.Apr 29, 2025 am 12:42 AM

Load balancing affects session management, but can be resolved with session replication, session stickiness, and centralized session storage. 1. Session Replication Copy session data between servers. 2. Session stickiness directs user requests to the same server. 3. Centralized session storage uses independent servers such as Redis to store session data to ensure data sharing.

Explain the concept of session locking.Explain the concept of session locking.Apr 29, 2025 am 12:39 AM

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

Are there any alternatives to PHP sessions?Are there any alternatives to PHP sessions?Apr 29, 2025 am 12:36 AM

Alternatives to PHP sessions include Cookies, Token-based Authentication, Database-based Sessions, and Redis/Memcached. 1.Cookies manage sessions by storing data on the client, which is simple but low in security. 2.Token-based Authentication uses tokens to verify users, which is highly secure but requires additional logic. 3.Database-basedSessions stores data in the database, which has good scalability but may affect performance. 4. Redis/Memcached uses distributed cache to improve performance and scalability, but requires additional matching

Define the term 'session hijacking' in the context of PHP.Define the term 'session hijacking' in the context of PHP.Apr 29, 2025 am 12:33 AM

Sessionhijacking refers to an attacker impersonating a user by obtaining the user's sessionID. Prevention methods include: 1) encrypting communication using HTTPS; 2) verifying the source of the sessionID; 3) using a secure sessionID generation algorithm; 4) regularly updating the sessionID.

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.