1、方法一：使用不帶參數(shù)的v-bind寫法

<div id="app"> <child v-bind="todo"></child> </div>

　　v-bind中沒(méi)有參數(shù)，而組件中的props需要聲明對(duì)象的每個(gè)屬性

Vue.component('child', { props: ['text','isComplete'],template: '<span >{{ text }} {{isComplete}}</span>' }) new Vue({el: '#app',data: {todo: {text: 'Learn Vue',isComplete: false}} })

　　顯示效果如下

　　

2、方法二：使用帶參數(shù)的v-bind寫法

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

　　v-bind后跟隨參數(shù)todo，組件中的props需要聲明該參數(shù)，組件變可以通過(guò)todo來(lái)訪問(wèn)對(duì)象的屬性

Vue.component('child', { props: ['todo'],template: '<span >{{ todo.text }} {{todo.isComplete}}</span>' }) new Vue({el: '#app',data: {todo: {text: 'Learn Vue',isComplete: false}} })

　　顯示效果如下

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/lhyhappy365/p/8893544.html

總結(jié)

以上是生活随笔為你收集整理的vue.js将一个对象的所有属性作为prop进行传递的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。