正文
vue.js将一个对象的所有属性作为prop进行传递
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、方法一：使用不带参数的v-bind写法<div id="app">
<child v-bind="todo"></child>
</div>
<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>
<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
}
}
})
显示效果如下
