Passing entire data object as props

Question

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>

Answer 1

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.

Answer 2

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

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