In this section, we will briefly revisit props to see a practical example of how to communicate between a parent and a child component in Vue. In other words, we want to take some data from the parent component and pass it to the child component. The data we will be passing will simply be additional numbers to be included in the counter of our quickstart-vue app.
In our App.vue file, we'll add a button:
<template>
<div id="app">
<HelloWorld msg="Welcome to Vue Quickstart!"/>
<button v-on:click="addTen">Add 10</button>
<HelloAgain v-bind:counterFromParent="countUp"/>
</div>
</template>The button is placed between the two components we already had. We have added a v-on directive, tracking a click event on the button. The click event will trigger the addTen method, so we will specify it in between the <script> tags of our App.vue file:
methods: {
addTen() {
this.countUp += 10
...