父组件向子组件传值props

父组件

 <template>
  <child :list="list" />
  <h4>{{ title }}</h4>
</template>
<script>
// 引用子组件
import child from './child.vue'
export default {
  data() {
    return {
      title: 'APP根组件',
      list: ['a1', 'a2', 'a3']
    }
  },
  // 组件注册
  components: {
    child
  }
}
</script>

子组件

<template>
  <div>
    <span v-for="(item, index) in list" :key="index">{{ item }}</span>
  </div>
</template>
<script>
export default {
  props: ['list']
}
</script>

效果