VUE3 basic tutorial: Custom events using Vue.js

Vue.js is a popular JavaScript framework that provides many convenient features, so it is very useful when developing web applications. The custom event system in Vue.js makes it more flexible and allows for better code reusability through component event firing and handling. In this article, we will discuss how to use custom events with Vue.js.

The basis of custom events in Vue.js

In Vue.js, we can listen to DOM events through the v-on directive. For example, we can have the following code to listen to the click event of the button:

<button v-on:click="onClick">Click me!</button>

The "onClick" is a component method, which will be called when the button is clicked. Here "onClick" is the key of $emit method. The $emit method is a method in Vue.js that can trigger custom events. When using the $emit method, its first parameter specifies the name of the custom event, and the other parameters are passed to the listener.

The following is an example of using the $emit method to trigger a custom event:

// 子组件.vue
<div>
  <button v-on:click="$emit('custom-event', 'some data')">Click me!</button>
</div>

// 父组件.vue
<child-component v-on:custom-event="handleCustomEvent"></child-component>

methods: {
  handleCustomEvent (data) {
    console.log(data) // logs "some data"
  }
}

In the child component, we use a button to trigger a custom event, where the first parameter is "custom-event", and the second parameter is the data passed to the listener. In the parent component, we use the v-on directive to listen for the "custom-event" event and bind it to the handleCustomEvent function, which will be called when the event is triggered. handleCustomEvent receives the data parameter passed to it and prints out that data in the console.

Use custom events to complete communication between components

The custom event system of Vue.js can be used to transfer data between components. Here is an example of using custom events to complete communication between components:

// 子组件A.vue
<template>
  <div>
    <button v-on:click="$emit('update-counter', counter)">Increase counter</button>
  </div>
</template>

<script>
export default {
  data () {
    return { counter: 0 }
  }
}
</script>

// 子组件B.vue
<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <child-component-a v-on:update-counter="updateCounter"></child-component-a>
  </div>
</template>

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

export default {
  components: { ChildComponentA },
  data () {
    return { counter: 0 }
  },
  methods: {
    updateCounter (counter) {
      this.counter = counter
    }
  }
}
</script>

In this example, we have two components: ChildComponentA and ChildComponentB. ChildComponentA is a button component that increases the counter. When the button is clicked, it triggers a custom event update-counter through the $emit method and passes the current counter value as a parameter to the parent component.

ChildComponentB is a counter component, in which we use ChildComponentA, listen to the update-counter custom event, and bind it to the updateCounter method. The updateCounter method sets the passed counter value to the component's state variable counter, so we can display the current value in the component.

Summary

The custom events of Vue.js are a powerful feature that can achieve efficient communication between components. In addition to triggering events within components, Vue.js also supports triggering events globally. You can use the $emit method in each Vue.js instance, not just within the component.

When using custom events, we should follow the best practices of Vue.js, which is to avoid confusion with the DOM events of the language itself and use them for direct communication with components. When implementing inter-component communication, it is best not to share state variables between components and instead use custom events to pass data.

The above is the detailed content of VUE3 basic tutorial: Custom events using Vue.js. For more information, please follow other related articles on the PHP Chinese website!