vue.js将一个对象的所有属性作为prop进行传递

1、方法一：使用不带参数的v-bind写法

　　v-bind中没有参数，而组件中的props需要声明对象的每个属性

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

　　显示效果如下

　　

2、方法二：使用带参数的v-bind写法

　　v-bind后跟随参数todo，组件中的props需要声明该参数，组件变可以通过todo来访问对象的属性

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

　　显示效果如下

　　

 

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