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

Michael Hoffmann

@mokkapps

Script

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 X to get notified about new tips, blog posts, and more.

Vue Tip: Animate Child Component Before Route Leave

Vue Tip: Watch Nested Values