1、方法一：使用不带参数的v-bind写法
<div id="app"> ??<child v-bind="todo"></child></div>
v-bind中没有参数，而组件中的props需要声明对象的每个属性
Vue.component(‘child‘, { ??props: [‘text‘,‘isComplete‘], ?template: ‘<span >{{ text }} ?{{isComplete}}</span>‘ })new Vue({ ?el: ‘#app‘, ?data: { ???todo: { ?????text: ‘Learn Vue‘, ?????isComplete: false ???} ?}})显示效果如下
2、方法二：使用带参数的v-bind写法
<div id="app"> ??<child v-bind:todo="todo"></child></div>
v-bind后跟随参数todo，组件中的props需要声明该参数，组件变可以通过todo来访问对象的属性
Vue.component(‘child‘, { ??props: [‘todo‘], ?template: ‘<span >{{ todo.text }} ?{{todo.isComplete}}</span>‘ })new Vue({ ?el: ‘#app‘, ?data: { ???todo: { ?????text: ‘Learn Vue‘, ?????isComplete: false ???} ?}})显示效果如下
vue.js将一个对象的所有属性作为prop进行传递
原文地址：https://www.cnblogs.com/lhyhappy65/p/8893544.html