Detailed explanation of Vue's custom event component communication tool

What are custom events for Vue?

In Vue, a custom event is a mechanism that allows a component to send information to its parent component. This communication mechanism enables a component to register an event listener in the parent component in response to the occurrence of a specific event. Custom events are usually used to handle the following situations:

• The child component passes data to the parent component:A child component can trigger custom events and pass data to the parent component so that the parent component can process this data.
• Communication between non-parent and child components:Custom events can also be used to communicate between components that are not directly associated, through a central event bus or VueX state management.
• Component reuse:Custom events make components more versatile because they can trigger different events to suit different situations.
• Decoupled components:With custom events, components can be better decoupled because they do not require direct references or dependencies on other components.

How to customize events

Vue's custom events are based on Vue instances$emit Method and parent componentv-on Instructions are implemented. Here are the steps to customize events:

1. Trigger custom event in child component

Subcomponent usage$emit The method triggers a custom event and passes the data to be passed.$emit The first parameter of the method is the name of the event, and the subsequent parameter is the data to be passed.

<template>
  <button @click="notifyParent">Trigger event</button>
</template>
<script>
export default {
  methods: {
    notifyParent() {
      // Trigger a custom event named 'custom-event' and pass the data      this.$emit('custom-event', 'This is the data passed from the child component');
    }
  }
};
</script>

2. Listen to custom events in parent component

Parent component usagev-on Directives to listen for custom events triggered by subcomponents. The listener's parameters are the event name, and a callback function, which handles the data passed when the event is triggered.

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
    <p>Data received from subcomponent：{{ receivedData }}</p>
  </div>
</template>
<script>
import ChildComponent from './';
export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      // Process data passed from subcomponents       = data;
    }
  }
};
</script>

In this example, the subcomponent passes$emit The method trigger name iscustom-event custom events and pass data to the parent component. Parent component usagev-on Instruction monitoringcustom-event Event, and execute when the event is triggeredhandleCustomEvent Method, save the data inreceivedData middle.

Example: Build a to-do list with custom events

Let's use an example to show how to build a to-do list using Vue's custom events. We will create a parent component that contains a child component that is used to add new todos and pass them to the parent component via custom events.

Step 1: Create a Vue app

First, use the Vue CLI or manually create a Vue application.

Step 2: Create a child component

Create a name called child component to add new todo items.

<template>
  <div>
    <input v-model="newTodo" @="addTodo" placeholder="Add a new task" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      if (() !== '') {
        // Trigger the custom event 'add-todo' and pass the contents of the new task        this.$emit('add-todo', );
         = '';
      }
    }
  }
};
</script>

Step 3: Create the parent component

Creates a parent component that displays the to-do list and handles events that add new tasks.

<template>
  <div>
    <h1>To-do list</h1>
    <todo-form @add-todo="addTodo"></todo-form>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
    </ul>
  </div>
</template>
<script>
import TodoForm from './';
export default {
  components: {
    'todo-form': TodoForm
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTodo(newTodo) {
      // Add new tasks to the to-do list      (newTodo);
    }
  }
};
</script>

In this example, the subcomponentTodoForm Used to add new to-do items. The child component triggers a custom event when the user enters a task in the input box and presses Enter keyadd-todo , and pass the contents of the new task to the parent component. The parent component listens to this event,addTodo Add new tasks to the to-do list in the method.

Step 4: Run the Vue application

usenpm run serveOr your development server command to run the Vue application. You will be able to view and manipulate to-do lists in your browser, enabling data transfer between custom events, child components and parent components.

Summarize

Vue's custom events are a powerful tool when building applications, which allows communication and data transfer between different components. By triggering custom events and listening to these events in the parent component, you can achieve decoupling between components, data sharing, and greater reusability. Hope this article helps you understand Vue's custom events and be able to use them flexibly in your Vue project. If you have any questions or need further assistance, feel free to ask us.

This is the end of this article about the detailed explanation of the communication tool of Vue's custom event components. For more information about Vue's custom event content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!