VueJS part 12: Exposing methods and data in components

Kristijan
4 min readNov 19, 2023

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.

Vue logo

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…

--

--