Vue 父子组件传值

父组件 --> 传子组件

父组件代码  --  parents.vue

<template>
    <child :list='List'></child> 
    // 子组件通过 props 接收传递过去的 list
    // 父组件向子组件传递 list ,list 的值 为List 数组，此处故意不同大小写，为了区分参数和值
</template>
<script>
import Child from '../components/child.vue' // 引入子组件
export default {
  data () {
    return {
      List：[ // 定义向子组件传的值
            {name: ''xiaoming', id: 1},
            {name: ''xiaofang', id: 2},
            {name: ''xiaohong', id: 3}
        ]
    }
  },
  components: {
    Child // 注册子组件
  }
}
</script>

父组件代码  --  child.vue

<template>
    <ul>
        <li v-for="(item,index) in list" :key="index">
            <p><span>{{list.id}} : </span>{{list.name}}</p>
        </li>
    </ul>
</template>
<script>
export default {
  props: {
        list: Array // 此处为父组件传来的数组，需要注意的是，类型一定要对应
    }
}
</script>