CODEWITHSUNDEEP
vue.js
DatsunBing
DatsunBing

Reputation: 9076

Vue: When an object has many properties, how do you pass it as a prop to a child?

How does a parent pass an object to a child when that object has numerous properties?

I don't want to use the "Passing properties of an object" syntax, v-bind="myObject", because I would have to define all the properties in the child individually (for validation), and the list would be too long.

I don't want to use the "Pass an object" syntax, v-bind:myObject="myObject", because I need to change the values of the properties in the child, which would mutate them in the parent, and thereby violate the principle of 'events up, mutations down'.

I could pass the entire object to the child, then make a local copy of the properties (by returning them in the child's data property) and modify those. But then when I make mutations in the parent (using an event bus), they are not propagated to the child. (In other words, the child's data properties are no reactive).

Are there other options?

Upvotes: 0

Views: 1283

Answers (1)

Daniel
Daniel

Reputation: 35724

this functionality is possible with vue's existing v-bind functionality

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

this will pass all the props, which is helpful if you have a wrapper component and want to pass down all props to the child. You can also use a computed value to generate an object if you want to include/exclude data or props.

docs: https://v2.vuejs.org/v2/api/#v-bind

Upvotes: 2

Related Questions