Vue.js to pass all properties of an object as prop

1. Method One: Use v-bind notation without parameters

<div id= "App" >   <child v-bind= "Todo" ></child></div>

There are no parameters in V-bind, and props in the component needs to declare each property of the object

Vue.component (' child ', {   props: [' text ', ' Iscomplete '],  Template: ' <span >{{text}}  {{iscomplete}} </span> '}) New Vue ({  el: ' #app ',  data: {    TODO: {      text: ' Learn Vue ',      iscomplete:false    }< c10/>}})

The display effect is as follows

　　

2, method Two: Using the v-bind notation with parameters

<div id= "App" >   <child v-bind:todo= "Todo" ></child></div>

V-bind follows the parameter Todo, the props in the component needs to declare the parameter, and the component can access the object's properties through Todo.

Vue.component (' child ', {   props: [' todo '],  Template: ' <span >{{Todo.text}}  {{todo.iscomplete}} </span> '}) New Vue ({  el: ' #app ',  data: {    TODO: {      text: ' Learn Vue ',      iscomplete:false    }< c9/>}})

The display effect is as follows

　　

Vue.js to pass all properties of an object as prop