Passing Data over Custom Components with Vue3 Composition API

With the release of Vue3 and the Composition API, it has become much easier to create custom components and interact with their parents.

Here I will show its new usage by making a simple component. Since I haven’t been able to find much resources on Custom Components on Vue3 yet, I am sharing this article to find the most effective solution in my opinion.

The component you see in the example was written using tailwind, but in order not to complicate the content of my writing, I will share the codes as if there are no design parts.

This component is a custom component that sends the changes on the price unit to the parent component via emit, while sending the price to the parent component through the v-model.

As you can see the codes, the component contains an input element and a select element. By using Composition API, we enable the interaction of these elements with their parent component. At this point, you can find the article I wrote in detail about the computed, ref, watch and setup methods below.

I’ve bound the input element to a ‘val’ variable using Vue’s core features, the v-model. The variable ‘val’ is a computed variable, it takes the value from the modelValue of the component with the get method, and in the set method, when the value is changed from inside the component, it performs this change and forwards it to the top.

The ‘emit’ method is used when we want to trigger an event on the component. We are sending the change to the parent by stating that we have made a change with the update, which is one of the built-in emit methods, and that this change is on the ‘modelValue’. The parent catches this change and performs the necessary operations.

In order to show watch and ref methods, we will add a second variable and use the select element, where the price unit can be selected.

I created a ref (equal to data in vue2) object and defined its initial value as ‘USD’. Then, using the watch method, I performed the inside operation every time the ‘priceType’ field changed. Here, when there is a change on the ‘priceType’ by typing custom emit, we trigger this change to the parent component.

The parent component catches these changes by saying @priceTypeChanged=”doSomething” and calls the doSomething method defined on it.

<CustomComponent 
v-model="price"
@priceTypeChanged="doSomething"
/>

In this article, I tried to write a custom component using Vue3 Composition API and show the passing data with its parent using watch, computed, and emit events.

I hope it helps those who want to learn about this.

--

--

--

Frontend Developer | erdemgonul.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Simple Vue.js Form Validation with Vuelidate

JavaScript Tutorial for Beginners : A Complete Guide

Creating custom element with Angular 6

Fetch Page Load Metrics With C# Selenium WebDriver Testing Framework

Weekly newsletter of Eduard Stefanescu — 28 Feb 2021

How to accomplish “Voronoi/Delaunay” transition animation using d3 and react-spring

prompt.yes?(“Read on?)

Final Fantasy XIV Poster

An Introduction to Linked Lists by a Newbie

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Erdem Gonul

Erdem Gonul

Frontend Developer | erdemgonul.com

More from Medium

Adventures of a Front-End Developer — Our Work to Improve Web Performance

Creating a Vue 3 and TypeScript project using Vite

Where does Nuxt.js fit in Web Development?

nuxtjs-for-web-development

Stop cross contamination in your Vue component — Part III