Tutorial

Passing Multiple Props to a Vue.js Component

Published on January 7, 2018
author

Alex Jover Morales

Passing Multiple Props to a Vue.js Component

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

All developers using component-based architectures, such as Vue’s and React’s, know that creating reusable components is hard, and most of the time you end up having a lot of props in order to make it easier to control and customize a component from the outside.

That’s not bad, but it’s true that passing lots of props can get a bit cumbersome and ugly. However, there’s a way for every Vue.js component style to cope with it.

Let’s take as an example the vuetify’s button component, one of the simplest ones. Say that we want to pass the same bunch of props in most cases:

<v-btn
  color='primary'
  href='https://alligator.io'
  small
  outline
  block
  ripple
>
  Hello Meat
</v-btn>

It could make sense to have them in a separate file, let’s call it props.js:

export const buttonProps = {
  color: 'primary',
  small: true,
  outline: true,
  block: true,
  ripple: true,
  href: 'https://alligator.io'
}

JSX and Render Functions

Since they give you more power and flexibility when it comes to rendering, it’s fairly easy to pass multiple props at once.

In a render function:

import { buttonProps as props } from './props.js';

export default {
  render: h => h(
    'v-btn',
    { props },
    'Hello Meat'
  )
};

And in JSX:

import { buttonProps as props } from './props.js';

const data = { props }

export default {
  render: h => <v-btn {...data}>Hello Meat</v-btn>
};

Using a Vue.js template

What about using the Vue.js DSL (or template)? No worries, that’s also possible. All you need to do is to use the v-bind directive. Given an object that you must define in the data option of your component it will bind all props:

<template>
  <v-btn v-bind='buttonProps'>
    Hello Meat
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>

With this trick you won’t need to fill your template with repeated props at several places in your app, while still being able to use the beloved template tag.

Wrapping Up

Passing multiple props to a component can be simplified using the examples mentioned in this article. This is especially useful for presentational and third party components that have lots of props.

Keep in mind that the examples used here are merely educational. If you want to stay DRY (Don’t Repeat Yourself) there could be better approaches depending on the specific case, such as creating your own wrapper components.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alex Jover Morales

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel