search
HomeBackend DevelopmentPHP TutorialVue component communication: using $emit to trigger child component events

Vue component communication: using $emit to trigger child component events

Jul 08, 2023 pm 03:04 PM
$emitvue component communicationchild component events

Vue component communication: Use $emit to trigger sub-component events

In Vue development, component communication is a very important topic, because data transfer and interaction between components are the key to building complex applications . Vue provides a variety of ways to implement communication between components, one of which is to use $emit to trigger sub-component events. In this article, we will introduce how to use $emit for component communication in Vue and deepen the understanding through sample code.

First of all, we need to understand the basic usage of $emit. In Vue, each component can trigger a custom event through the $emit method. This event can be listened to in the parent component and respond accordingly. The $emit method accepts two parameters. The first parameter is the name of the event to be triggered, and the second parameter is the value to be passed to the event handling function. Here is an example:

// 子组件
Vue.component('child', {
  template: `
    <div>
      <button @click="triggerEvent()">点击触发事件</button>
    </div>
  `,
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello World!');
    }
  }
});

// 父组件
Vue.component('parent', {
  template: `
    <div>
      <child @custom-event="handleEvent"></child>
    </div>
  `,
  methods: {
    handleEvent(value) {
      console.log(value); // 输出:Hello World!
    }
  }
});

// 应用程序
new Vue({
  el: '#app',
});

In the above code, the button click event in the child component will trigger a custom event named "custom-event" with "Hello World!" as a parameter Passed to the parent component. The event is listened to in the parent component and the received parameters are printed out in the event handler function.

Through this example, we can see that the child component triggers a custom event through the $emit method and passes the data to the parent component. This approach establishes a direct communication pipeline between parent and child components, making the data flow between components clearer and more controllable.

In addition to listening to the custom events of the child component through "@event name" in the parent component, we can also use the v-on directive to achieve the same effect. For example, the parent component can listen to the events of the child component like this:

<child v-on:custom-event="handleEvent"></child>

The effects achieved by these two methods are exactly the same, but the writing methods are slightly different.

In addition, $emit can also use modifiers to more precisely control the event delivery behavior. Commonly used modifiers are .stop, .prevent and .once. The .stop modifier is used to prevent the event from bubbling, the .prevent modifier is used to prevent the default event, and the .once modifier is used to trigger the event only once. The following is an example of using modifiers:

// 子组件
Vue.component('child', {
  template: `
    <div>
      <button @click.stop="triggerEvent()">点击触发事件</button>
    </div>
  `,
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello World!');
    }
  }
});

In the above code, the .stop modifier prevents the event from bubbling, that is, the event will only be triggered in the child component and will not bubble to Parent component.

To summarize, using $emit to trigger subcomponent events is a common way to implement component communication in Vue. Through the $emit method, the child component can trigger a custom event and pass the data to the parent component, thus realizing data transfer and interaction between components. During development, we can use different modifiers according to needs to more precisely control the event delivery behavior. We hope that through the introduction and sample code of this article, readers can better understand and use the $emit method to implement communication between Vue components.

The above is the detailed content of Vue component communication: using $emit to trigger child component events. 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
What is the full form of PHP?What is the full form of PHP?Apr 28, 2025 pm 04:58 PM

The article discusses PHP, detailing its full form, main uses in web development, comparison with Python and Java, and its ease of learning for beginners.

How does PHP handle form data?How does PHP handle form data?Apr 28, 2025 pm 04:57 PM

PHP handles form data using $\_POST and $\_GET superglobals, with security ensured through validation, sanitization, and secure database interactions.

What is the difference between PHP and ASP.NET?What is the difference between PHP and ASP.NET?Apr 28, 2025 pm 04:56 PM

The article compares PHP and ASP.NET, focusing on their suitability for large-scale web applications, performance differences, and security features. Both are viable for large projects, but PHP is open-source and platform-independent, while ASP.NET,

Is PHP a case-sensitive language?Is PHP a case-sensitive language?Apr 28, 2025 pm 04:55 PM

PHP's case sensitivity varies: functions are insensitive, while variables and classes are sensitive. Best practices include consistent naming and using case-insensitive functions for comparisons.

How do you redirect a page in PHP?How do you redirect a page in PHP?Apr 28, 2025 pm 04:54 PM

The article discusses various methods for page redirection in PHP, focusing on the header() function and addressing common issues like "headers already sent" errors.

Explain type hinting in PHPExplain type hinting in PHPApr 28, 2025 pm 04:52 PM

Article discusses type hinting in PHP, a feature for specifying expected data types in functions. Main issue is improving code quality and readability through type enforcement.

What is PDO in PHP?What is PDO in PHP?Apr 28, 2025 pm 04:51 PM

The article discusses PHP Data Objects (PDO), an extension for database access in PHP. It highlights PDO's role in enhancing security through prepared statements and its benefits over MySQLi, including database abstraction and better error handling.

How to create API in PHP?How to create API in PHP?Apr 28, 2025 pm 04:50 PM

Article discusses creating and securing PHP APIs, detailing steps from endpoint definition to performance optimization using frameworks like Laravel and best security practices.

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

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!