Javascript is required
Mokkapps Logo

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Mar 18, 2022
1 min read
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 Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.