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}} })

　　显示效果如下

　　

 

转载于:https://www.cnblogs.com/lhyhappy365/p/8893544.html

总结

以上是生活随笔为你收集整理的vue.js将一个对象的所有属性作为prop进行传递的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。