DEV Community


Discussion on: VueJS - Different ways to implement v-model

vcpablo profile image
Pablo Veiga Author

Hey @srikanth597 thanks for reading and participating.

Explaining 1, 2 and 3.
By default, v-model on a component uses value as the prop and input as the event. So that's why I use v-model on <BaseInput /> usage and, inside it, there is a prop called value. The value of the P text variable will be bind directly to the default prop value.
(Check: Customizing Component v-model (VueJS docs))

In regards to 4 and 5, as a component is, by default, a reusable instance Vue, therefore I don't need to define the $emit event manually, because it is already present in the component implicitly.
(Check: Base Example (VueJS docs)

Now, talking about the update event, in both 4th and 5th examples, the model property is responsible to configure the update event, as the one that will update the v-model, which is, in these cases, represented by the text prop.
(Check: Model (VueJS docs


srikanth597 profile image

Thanks for ur reply,
So if I understood correctly Vue automatically figure out v-model='text' as value prop automatically in component definition.

This arises wierd doubt in my mind, what happens if for some reason I want to have 2 v-model properties I need to pass to component.

I understood your 4&5 point explanation

Thread Thread
vcpablo profile image
Pablo Veiga Author

Hey @srikanth597 , in the latest released version of VueJS, v3, it is possible to bind multiple v-model’s
Take a look at this article to understand a bit better.

Forem Open with the Forem app