Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the last post, I covered how to pass the data to the component. This post will cover how to send data from the component to the parent.
Initial component
We can start with the initial component set. A parent component will display the number how many times the button was clicked, and a child component that contains a button and send an update to the parent when a button is clicked.
<!--Parent component-->
<template>
<div>
<div>Number of clicks: {{counter}}</div>
<CounterButton></CounterButton>
</div>
</template>
<script>
import CounterButton from './CounterButton.vue';
export default {
components: {CounterButton},
data() {
return {
counter: 0
}
},
methods: {}
}
</script><!--Child component-->
<template>
<div>
<button type="button" @click="handleClick">Click</button>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
handleClick() {
console.log("handle click")
}
}
}
</script>