Introduction
Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. So far, I mostly used data and methods properties of the component. However, there are other, better ways to expose data or run some function and that is the topic of this post. So let us start with creating the initial component first.
Initial component
For better demonstration, I am starting with the parent component. This component has two counters and two buttons, each incrementing one of them. Then this component passes it to the child component which will display counter values in different ways. While simple and redundant, this example will help demonstrate the different ways and impacts of each one.
<template>
<div>
<div>{{firstCounter}}</div>
<div>{{secondCounter}}</div>
<ChildComponent :firstCounter="firstCounter" :secondCounter="secondCounter" />
<div>
<button @click="updateFirstCounter()">increment first</button>
<button @click="updateSecondCounter()">increment second</button>
</div>
</div>
</template><script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {ChildComponent},
data() {
return {
firstCounter: 0…