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

Using Events And Listeners In ExpressWebJs

Vue.js Interview Challenge — #10 — Countdown Timer — Solution

How to use Ant Design Step in SharePoint Framework (SPFx)

String methods in javascript

intro to localStorage Javascript

Nothing is impossible with SquadXClub Make people rich and?

Locate Online Node.js Memory Leaks

Select/Make and Listen — A Basic JavaScript Flow

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

Vue Clicked Outside: Creating Custom Listener for Clicking Outside a Component

Recursive components in Vue 3

Good bye Nuxt 2, hello Nuxt 3

How we use Composition API as Vuex alternatives