Javascript is required
ยท
1 min read

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

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

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

1<template>
2  <Button
3    :type="type"
4    :color="color"
5    :disabled="disabled"
6    :test-id="testId"
7    :icon="icon"
8    @click="onClick"
9    @custom="onCustom"
10  >
11    Login
12  </Button>
13</template>

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

1<template>
2  <Button v-bind="button">Login</Button>
3</template>
4
5<script setup lang="ts">
6const button = {
7  type: 'submit',
8  color: 'blue',
9  disabled: false,
10  testId: 'login-button',
11  icon: 'arrow-right',
12}
13</script>

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

1<template>
2  <Button v-on="buttonEventHandlers">Login</Button>
3</template>
4
5<script setup lang="ts">
6const buttonEventHandlers = {
7  onClick: () => console.log('Click'),
8  onCustom: () => console.log('Custom Event'),
9}
10</script>

Info

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

I will never share any of your personal data. You can unsubscribe at any time.