Vue props传递Object

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

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

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写法

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

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

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容