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>