Javascript is required
Mokkapps LogoMichael Hoffmann

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Mar 18, 2022
1 min read
|
117 views
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>
Info

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. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.