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进行传递的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。