Prop定义：组件上注册的一些自定义属性
Prop作用：向子组件传递数据
可以传递任意数量的prop
可以传递任意类型的prop

父

<template>
  <div id="app">
    <MySon 
    :username="username"
    :age="age"
    :isSingle="isSingle"
    :car="car"
    :hobby="hobby"
    ></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  name: 'App',
  components: {
    MySon
  },
  data () {
    return {
      username: 'x-y',
      age: '18',
      isSingle: false,
      car: {
        brand: 'benz'
      },
      hobby: ['basketball', 'football']
    }
  },
}
</script>

子

<template>
<div class="MySon">
    用户名: {{ username }}
    <br>
    年龄： {{ age }}
    <br>
    单身： {{ isSingle }}
    <br>
    车：{{ car.brand }}
    <br>
   爱好：  <p v-for="(item, index) in hobby" :key="index">{{ item}}</p>
</div>
</template>

<script>
export default {
    props: ['username', 'age', 'isSingle', 'car', 'hobby']
}
</script>