Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.

 

When using the v-model, the custom component will receive 'value' prop from the parent component. If we also want to pass ':value' to the custom component, we need to use  '@Model('change') propName'.

v-model will also received 'change' event for components communcation.

 

Checkbox:

 

Parent Component: