Vue Tip: Use v-bind to Pass Multiple Props to Components

Michael Hoffmann

@mokkapps

Vue Tip: Use v-bind to Pass Multiple Props to Components Image

It's totally valid to bind multiple props to a Vue component:

<template>
  <Button
    :type="type"
    :color="color"
    :disabled="disabled"
    :test-id="testId"
    :icon="icon"
    @click="onClick"
    @custom="onCustom"
  >
    Login
  </Button>
</template>

For a cleaner template you can also v-bind to bind an object including all your property information to your component:

<template>
  <Button v-bind="button">Login</Button>
</template>

<script setup lang="ts">
const button = {
  type: 'submit',
  color: 'blue',
  disabled: false,
  testId: 'login-button',
  icon: 'arrow-right',
}
</script>

If you need to handle a lot of events you might want to group them using v-on:

<template>
  <Button v-on="buttonEventHandlers">Login</Button>
</template>

<script setup lang="ts">
const buttonEventHandlers = {
  onClick: () => console.log('Click'),
  onCustom: () => console.log('Custom Event'),
}
</script>

v-bind and v-on works with Vue 2 and Vue 3.

If you liked this Vue tip, follow me on BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :

Vue Tip: Animate Child Component Before Route Leave

Vue Tip: Watch Nested Values