Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 custom events

Vue 3.0 provides a powerful system for handling custom events, which is an essential part of communication between components. Custom events in Vue allow child components to communicate with their parent components.

First, we'll start with a child component that emits an event:

<!-- ChildComponent.vue -->
<template>
  <button @click="emitCustomEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('customEvent', 'Hello, parent!')
    }
  }
}
</script>

In this example, the child component has a button. When the button is clicked, it triggers the emitCustomEvent method, which in turn emits a custom event named customEvent.

Now, we can listen to this event in a parent component:

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(payload) {
      console.log(payload) // Will log: "Hello, parent!"
    }
  }
}
</script>

In the parent component, we're listening to the customEvent using the v-on: directive (shorthand @). When the customEvent is fired, it triggers the handleCustomEvent method and passes the payload from the child component.

That's it! You've now communicated from the child component to the parent component using a custom event.

Note: It's a good practice to always use kebab-case for event names for compatibility with native DOM events. Vue will transform any camelCased event names to kebab-case on the parent side.

Also, remember that Vue's one-way data flow stipulates that props go down from parent to child, and events go up from child to parent. Always stick to this principle to avoid problems in your application.

Vue 3.0 $emit Method for Custom Events:

Use the $emit method to trigger custom events from a child component.

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from ChildComponent');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

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

export default {
  methods: {
    handleEvent(data) {
      console.log('Received event with data:', data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

Vue 3.0 Custom Event Modifiers:

Use event modifiers for special behavior during event handling.

<template>
  <button @click.stop="handleClick">Stop Event Propagation</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    },
  },
};
</script>

Passing Data with Custom Events in Vue 3.0:

Pass data along with custom events.

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', { message: 'Hello from ChildComponent' });
    },
  },
};
</script>

Vue 3.0 v-on Directive for Custom Event Handling:

Use the v-on directive for custom event handling.

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

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

export default {
  methods: {
    handleEvent(data) {
      console.log('Received event with data:', data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

Global Custom Events in Vue 3.0:

Use the Vue instance as an event bus for global custom events.

// main.js or an app-wide module
import { createApp } from 'vue';

const app = createApp({});
app.config.globalProperties.$bus = new app;

app.mount('#app');

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$bus.$emit('global-event', 'Hello from ChildComponent');
    },
  },
};
</script>

Vue 3.0 Custom Events and Component Communication:

Custom events enable parent-child component communication.

<!-- ChildComponent.vue -->
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from ChildComponent');
    },
  },
};
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

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

export default {
  methods: {
    handleEvent(data) {
      console.log('Received event with data:', data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>

Vue 3.0 Custom Event Naming Conventions:

Follow naming conventions for clarity and consistency.

<template>
  <ChildComponent @customEvent="handleEvent" />
</template>

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

export default {
  methods: {
    handleEvent(data) {
      console.log('Received event with data:', data);
    },
  },
  components: {
    ChildComponent,
  },
};
</script>