Why does vee-validate use v-bind instead of v-on to bind event handlers?

31 Views Asked by At

Looking at the documentation for vee-validate, I see the following example in the Components section:

The following is App.vue:

<script setup>
import { useForm } from 'vee-validate';
import CustomInput from './CustomInput.vue';

const { values, defineField } = useForm();

const [email, emailProps] = defineField('email');
</script>

<template>
  <CustomInput v-model="email" v-bind="emailProps" />

  <pre>values: {{ values }}</pre>
</template>

and the following is CustomInput.vue

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @blur="$emit('blur')" />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
});

const emit = defineEmits(['update:modelValue', 'blur']);
</script>

emailProps appears to be an object comprising of event handlers (e.g onBlur, onChange, and onInput). Why use v-bind instead of v-on for event handling? I see that both support object syntax, so why might v-bind be preferred over v-on in this case?

0

There are 0 best solutions below