Member-only story
Vue 3 — Component Events
3 min readOct 18, 2020
Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to listen to component events.
Listening to Child Components Events
We can listen to child components within the parent component.
Our child component has to emit the event so that the parent component can listen to it.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div :style="{ 'font-size': `${fontSize}px` }">
<todo-item
@enlarge-text="fontSize++"
v-for="t of todos"
:todo="t"
:key="t.id"
></todo-item>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
fontSize: 15,
todos: [
{ id: 1, name: "eat" },
{ id: 2, name: "drink" },
{ id: 3, name: "sleep" }
]
};
}
}); app.component("todo-item", {
props: ["todo"]…
