How to use $emit to trigger events in Vue

Vue.js is a popular front-end framework that allows you to create interactive and responsive web applications. There is a very powerful feature in Vue.js called $emit. Using this feature, you can trigger an event in the child component and handle it in the parent component. In this article, we will introduce how to use $emit to trigger events in Vue.js.

$emit in Vue.js

In Vue.js, all components can serve as event senders and receivers. When a component wants to trigger an event, it can use the $emit function. The syntax of the $emit function is as follows:

this.$emit(eventName, payload)

This function has two parameters. eventName is a string type, indicating the name of the event, and payload is an optional parameter and can be any type of data. When a component calls this function, Vue.js sends an event to its parent component. In the parent component, you can use the v-on directive to listen for this event.

Here is a simple example that shows how to use $emit in Vue.js:

<!--Child Component-->
<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', 'Hello from child component!')
    }
  }
}
</script>

<!--Parent Component-->
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    handleEvent(payload) {
      this.message = payload
    }
  }
}
</script>

In this example, we define a component called ChildComponent, which has a button. When the button is clicked, the child component triggers a custom event my-event by calling the $emit function and passes 'Hello from child component!' as payload to the parent component.

In the parent component, we use the v-on directive to listen to the custom event my-event and handle the event in the handleEvent method. In this method, we assign the payload of the event to the message data attribute. We then display the message in the template via an interpolation expression.

Summary

The $emit function in Vue.js allows you to trigger custom events in child components and handle events in parent components. You can use the $emit function to pass any type of data. In the parent component, use the v-on directive to listen for custom events.

Hopefully, through this article, you have learned the basics of using $emit to trigger events in Vue.js.

The above is the detailed content of How to use $emit to trigger events in Vue. For more information, please follow other related articles on the PHP Chinese website!