Discuss the use of v-bind instead of passing props one by one

[y4izus]

When passing dynamic props to a child, we are doing two things:

• Pass one by one all the properties. Example:

<EventCard
  v-for="event in filteredEvents"
  :key="`${event.title}-${event.place}-${event.date}`
  :types="event.types"
  :title="event.title"
  :image="event.image"
  :location="event.location"
  :date="event.date"
  :to="event.to"
/>

• Use v-bind to pass all the props at the same time (if they are in an object). Example:

<EventCard
  v-for="event in filteredEvents"
  :key="`${event.title}-${event.place}-${event.date}`"
  v-bind="event"
/>

Note that the first option is the shorthand for:

<EventCard
  v-for="event in filteredEvents"
  :key="`${event.title}-${event.place}-${event.date}`"
  v-bind:types="event.types"
  v-bind:title="event.title"
  v-bind:image="event.image"
  v-bind:location="event.location"
  v-bind:date="event.date"
  v-bind:to="event.to"
/>

We should decide which option to use in order to have a consistent code. For me, using v-bind results in a cleaner code, so I prefer this option. What do you think?

[korgan00]

I like the v-bind option. Also, we can define in the EventCard an interface or similar to define what to receive.

[delapuente]

I would not convert the fact that there are differences in the way you use v-bind in a consistency discussion.

Passing the properties one by one makes it explicit what's the data needed by the component and minifies unexpected side effects from passing more properties than those needed or reduces the need of creating adaptors in the process. It also avoids creating new objects when the properties come separated. It also helps code tools like Vetur to check those properties. Passing the properties one by one also mimics and honour HTML declarative style and keep data that is relevant to the component close to it.

By using v-bind we are passing data through, we intentionally say we don't mind about the type of data being passed. This is convenient when working with wrapper components where the internal components are in charge of consuming the properties.

For me, it is all about intention and so, I don't see a compulsory conflict in having both of them.

[eddybrando]

I agree with the points made by @delapuente.

I also think that it makes it easier to read the component's template and have a quick understanding of what properties are being passed to its children, without needing to jump back and forth to the script section.

I think this increases the risk of just ignoring what is being passed and may cause unintended side effects.

The DX advantages provided by coding tools like Vetur are also a big plus for me.

Personally, I would prefer passing all props via v-bind being the exception rather than the rule, although I acknowledge that it's also perfectly valid (https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object).

A valid scenario I can imagine would be having a stateless wrapper component that really just needs to pass all props to its child component. In this case, defining all props twice may cause even more maintainability issues, due to the props needing to be updated twice. So, v-binding all props at once could be beneficial.

[eddybrando]

I find this also to be a very interesting point of view about this pattern:

Most of the time you should explicitly pass the properties down. This ensures that you only expose a subset of the inner API, one that you know will work.
[...]
Sometimes it's fragile and tedious to pass every property along.

https://zhenyong.github.io/react/docs/transferring-props.html#manual-transfer

In a similar way, I'd prefer to v-bind all props at once only when the fragility and tediousness of not doing so outweighs the risk of exposing unexpected elements of the API that may cause side effects.