Mokkapps Logo

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
March 18, 2022
1 Minuten Lesezeit
|
- Ansichten

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 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.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github