vue pros 子组件接收父组件传递的值

1.子组件

ItemTemplate.vue

<template>
<div class="item">
<li v-for="pdata in pdatas">{{pdata.text}}</li>
</div>
</template>

<script>
export default {
name: 'Item',
props: ['propdatas'],  //必须声明父组件传的值的键名
data () {
return {
pdatas: this.propdatas,
}
}
}
</script>

2.父组件

<template>
<div class="about">
<li>{{msg}}</li>
<Item :propdatas="person.todos"/>  //propdata是父组件传到子组件的键  person.todos是父组件传给子组件的值
</div>
</template>
<script>
import Item from './ItemTemplate'
export default{
name: 'About',
components: { Item },  //子组件必须声明父组件
data() {
return {
msg: 'hello world',
person: {
name: 'VUE',
introduce: null,
age: null,
todos:[
{id:1, text:'任务1'},
{id:2, text:'任务2'},
{id:3, text:'任务3'},
]
}
}
}
}
</script>
<style scoped>
<style>