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 introduced a new way of handling events and listeners. Here's a step-by-step tutorial to get you started with the event API in Vue 3.0:
Installation:
If you haven't installed Vue yet, you can do it by using npm (Node Package Manager). Open your terminal and run the following command:
npm install -g @vue/cli
To create a new project, navigate to the folder where you want the project to be and run:
vue create my-project
Navigate into the project:
cd my-project
Then add Vue 3 to the project:
vue add vue-next
Creating a Vue component:
Let's create a basic Vue component that will respond to a button click. Create a new file named MyComponent.vue in the components directory.
Here's a basic template for MyComponent.vue:
<template>
<button @click="handleClick">Click me!</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log("Button clicked!");
}
}
};
</script>
Here, we've used the @click directive to listen to the click event. When the button is clicked, the handleClick method is triggered.
Using $emit to create custom events:
In Vue 3, you can create your own custom events using $emit. Here's how to do it:
<template>
<button @click="handleClick">Click me!</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const handleClick = () => {
emit('my-event', 'Hello world!');
}
return { handleClick };
},
emits: ['my-event']
};
</script>
In this example, we've used the emits option to specify the events that this component can emit. In the handleClick function, we've used $emit to emit our custom event called 'my-event' with a payload of 'Hello world!'.
Listening to custom events:
You can listen to this custom event in a parent component like so:
<template>
<MyComponent @my-event="handleMyEvent" />
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
components: {
MyComponent
},
methods: {
handleMyEvent(payload) {
console.log("my-event was emitted with payload:", payload);
}
}
};
</script>
Here, we've used the @my-event directive to listen to our custom event. When the 'my-event' is emitted, the handleMyEvent method is triggered with the payload from the event.
This is a basic overview of how the event API works in Vue 3.0. You can use this to create more complex interactions and workflows in your Vue applications.
Vue 3.0 v-on Directive:
The v-on directive is used for attaching event listeners to DOM elements or Vue components.
Example code:
<!-- EventHandling.vue -->
<template>
<button v-on:click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
},
},
};
</script>
Custom Events in Vue 3.0:
Use custom events to enable communication between parent and child components.
Example code:
<!-- CustomEvents.vue -->
<template>
<child-component @custom-event="handleCustomEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleCustomEvent(data) {
console.log('Custom event received with data:', data);
},
},
};
</script>
Vue 3.0 Event Modifiers:
Event modifiers provide additional functionality to event handling, such as preventing default behavior or stopping event propagation.
Example code:
<!-- EventModifiers.vue -->
<template>
<form v-on:submit.prevent="handleSubmit">
<button v-on:click.stop="handleClick">Click me</button>
</form>
</template>
<script>
export default {
methods: {
handleSubmit() {
console.log('Form submitted');
},
handleClick() {
console.log('Button clicked');
},
},
};
</script>
Event Binding in Vue 3.0:
Use the v-on directive for event binding to dynamically bind event handlers based on data.
Example code:
<!-- EventBinding.vue -->
<template>
<button v-on:[eventType]="handleEvent">Click me</button>
</template>
<script>
export default {
data() {
return {
eventType: 'click',
};
},
methods: {
handleEvent() {
console.log('Dynamic event handling');
},
},
};
</script>
Vue 3.0 Custom Event API:
Vue 3.0 introduces a custom event API for programmatic event handling and communication between components.
Example code:
<!-- CustomEventAPI.vue -->
<template>
<button @click="emitCustomEvent">Click me</button>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
emitCustomEvent() {
this.$emit('custom-event', 'Data from custom event');
},
},
};
</script>
Emitting and Handling Events in Vue 3.0:
Use $emit to emit custom events and handle them using v-on.
Example code:
<!-- EmitHandleEvents.vue -->
<template>
<child-component @custom-event="handleCustomEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleCustomEvent(data) {
console.log('Custom event received with data:', data);
},
},
};
</script>
Vue 3.0 Event Bus:
Use an event bus to facilitate communication between unrelated components.
Example code:
<!-- EventBus.vue -->
<template>
<div>
<button @click="emitEvent">Click me</button>
<child-component></child-component>
</div>
</template>
<script>
import { createApp, ref } from 'vue';
const eventBus = createApp({});
export default {
methods: {
emitEvent() {
eventBus.config.globalProperties.$emit('custom-event', 'Data from event bus');
},
},
};
</script>
Global Event Handling in Vue 3.0:
Use the app.config.globalProperties to handle events globally.
Example code:
<!-- GlobalEventHandling.vue -->
<template>
<button @click="emitGlobalEvent">Click me</button>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
emitGlobalEvent() {
this.$appContext.config.globalProperties.$emit('global-event', 'Global event data');
},
},
};
</script>
Vue 3.0 Event Propagation:
Events in Vue 3.0 propagate from child to parent. Use event.stopPropagation() to stop propagation.
Example code:
<!-- EventPropagation.vue -->
<template>
<div @click="handleClick">
<child-component @click.stop="handleChildClick"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleClick() {
console.log('Parent div clicked');
},
handleChildClick() {
console.log('Child component clicked');
},
},
};
</script>
Vue 3.0 Native Event Handling:
Use native event handling with v-on to respond to browser events.
Example code:
<!-- NativeEventHandling.vue -->
<template>
<input v-on:input="handleInput" />
</template>
<script>
export default {
methods: {
handleInput(event) {
console.log('Input value:', event.target.value);
},
},
};
</script>
Vue 3.0 Event Arguments:
Pass additional arguments to event handlers using the $event special variable.
Example code:
<!-- EventArguments.vue -->
<template>
<button @click="handleClick('Button clicked')">Click me</button>
</template>
<script>
export default {
methods: {
handleClick(message) {
console.log(message);
},
},
};
</script>
Vue 3.0 v-model for Custom Events:
Use v-model to create a two-way binding on custom components by emitting and handling update events.
Example code:
<!-- ModelForCustomEvents.vue -->
<template>
<custom-input v-model="inputValue"></custom-input>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
data() {
return {
inputValue: '',
};
},
};
</script>
<!-- CustomInput.vue -->
<template>
<input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>
<script>
export default {
props: {
value: String,
},
};
</script>