CODEWITHSUNDEEP
vue.js
Mahmud Adam
Mahmud Adam

Reputation: 3579

Passing entire data object as props

Is it possible in Vue to pass the whole data object as props?

For example

Vue.component('comp', {
  props: ['allData'],
  template: '<div>{{allData.msg}}</div>'
})

new Vue({
 el: "#test",
 data: {
   msg: "Hello"
 }
})

In my view:

<div id="test">
  <comp :allData="data"></comp>
</div>

Upvotes: 5

Views: 6269

Answers (2)

wanyama_man
wanyama_man

Reputation: 476

It's possible like this:

<div id="test">
  <comp :allData="$data"></comp>
</div>

However, mutating allData in the component will affect the parent's state since it's an object. See the warning from Vue 1.0 docs below:

Note that if the prop being passed down is an Object or an Array, it is passed by reference. Mutating the Object or Array itself inside the child will affect parent state, regardless of the binding type you are using.

and Vue 2.0 docs

Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state.

Upvotes: 4

Linus Borg
Linus Borg

Reputation: 23968

You can access the whole object via $data, and pass it.

But it's usually not the best idea to mess with it.

Upvotes: 2

Related Questions