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

Posted 2020-10-31 lhyhappy65

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

　　显示效果如下