Usage and common scenarios of Vue custom events

Usage and common scenarios of Vue custom events

Vue.js is a popular JavaScript framework for building user interfaces. In Vue, we can implement communication between components through custom events. Custom events are one of the very useful features in Vue, allowing us to pass data between different components and trigger specific behaviors. This article will introduce the usage and common scenarios of custom events in Vue, and provide specific code examples.

1. Basic usage of custom events

In Vue, we can use the $emit method to trigger custom events. The $emit method receives two parameters. The first parameter is the name of the event to be triggered, and the second parameter is the data to be passed. Components that receive custom events need to use the v-on directive to listen for events and execute related logic when the event is triggered.

The following is a simple example that demonstrates how to trigger a custom event in the parent component and receive and handle the event in the child component:

<!-- 父组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, world!');
    },
    handleEvent(data) {
      console.log(data); // 输出：Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello, world!');
  }
}
</script>

In the above example, when " When the event button is triggered, the parent component triggers the custom event and passes the string "Hello, world!" as data. The subcomponent listens to custom events through the v-on directive and prints out the received data in the handleEvent method.

2. Common scenarios of custom events

1. Communication between parent and child components

Custom events transfer data and implementation between parent and child components Communication is very convenient. The parent component can pass data to the child component through custom events, and listen to the custom events triggered by the child component to obtain the child component's data.

2. Communication between sibling components

If two components do not have a parent-child relationship, but need to communicate, you can use Vue's event bus to achieve it. An event bus is an empty Vue instance used to share events between different components. Custom events can be triggered and received between different components through the $emit and $vnode.$on methods.

Here is an example that demonstrates how to use the event bus to communicate between sibling components:

<!-- 组件A -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1>组件B</h1>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}
</script>

<!-- eventBus.js -->
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

In the above example, component A triggered a custom event through the event bus, and Data was passed. Component B listens to custom events through the event bus and obtains data in the callback function.

3. Communication between cross-level components

Vue provides provide/inject API to achieve communication between cross-level components. By using provide in the parent component to provide data, and using inject in the descendant component to inject data, communication between components at any level is achieved.

The following is an example that demonstrates how to use provide and inject to achieve communication between cross-level components:

<!-- 父组件 -->
<template>
  <div>
    <p>父组件提供的数据：{{ data }}</p>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件注入的数据：{{ injectedData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>孙子组件注入的数据：{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

In the above example, the parent component provides the data "Hello" through provide , world!", child components and grandchild components have data injected through inject respectively and used in the template.

Summary

Custom events are a very useful feature in Vue, which can easily achieve communication between components. In Vue, we can use the $emit method to trigger custom events and listen for events through the v-on directive. Custom events are suitable for communication between parent-child components, sibling components, and cross-level components. I hope that the large number of sample codes provided in this article can help you better understand the usage and common scenarios of custom events in Vue.

The above is the detailed content of Usage and common scenarios of Vue custom events. For more information, please follow other related articles on the PHP Chinese website!