How to create a custom component and communicate with the parent through `v-model` in Vue.js

1 min readFeb 1, 2019

Right now I have lines of code to make a select box which looks like this

<select v-model="somethingSomething">
<option disabled selected>Select me</option>
<option v-for="..." :value="..." :key="...">...</option>

However, I have this on many pages and it would be tedious to repeat myself.

So I went with creating a custom component and use that in every page I need. It looks like this

<select @input="handleInput">
<option v-for="item in collection" :key="">...</option>
export default {
name: 'OptionSelectComponent',
data() {
return {
collection: [...],
methods: {
handleInput(e) {
mounted() {

On the page you want to use, use


and don’t forget to import

import OptionSelectComponent from '@/components/OptionSelectComponent.vue'

and export the component

export default {
components: {

Annnnd… Bob’s your uncle!


Since it’s <select></select>, we have to check using @input which fires when an <option></option>is selected.

We handle the event using handleInput(e)with e (stands for event) as its argument. Then we emit the event along with (how I got this? well, just console.log(e) and see which one is the one you you — it’s stupid and it works duh)

And that’s it. You can modify the code to get the result you want.





Senior Software Engineer at Agoda・Coding and having existential crisis simultaneously・