vue.js將一個對象的所有屬性作為prop進行傳遞

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

　　顯示效果如下