025.Vue3入门，父页面给子页面传递数据，校验Props给出默认值

1、App.vue代码：

<template>
  <Father/>
</template>

<script setup>
import Father from './view/Father.vue'
</script>

<style>
</style>

2、Father.vue代码

<template>
  <h3>父页面</h3>
  <Child :FMsg="msg" :FAge="age" :FName="name" :FUserInfo="userInfo"/>
</template>

<script>
import Child from './Child.vue'

export default {
  data() {
    return {
      // msg: '父页面数据！',
      age: 18,
      name: ['张三', '李四', '王五'],
      userInfo: [{
        name: '张三',
        age: 18,
        sex: '男'
      }, {
        name: '李四',
        age: 22,
        sex: '女'
      }]
    }
  },
  components: {
    Child
  }
}
</script>

3、Child.vue代码：

<template>
  <h3>子页面</h3>
  <p>{{ FMsg }}</p>
  <p>{{ FAge }}</p>
  <p>{{ FName }}</p>
  <p v-for="(UserInfo,index) of FUserInfo" :key="index">{{ UserInfo.sex }}</p>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    //FMsg没有传过来，就报错
    'FMsg': {required: true},
    //Fage没有传过来，就使用默认值0
    'FAge': {type: Number, default: 0},
    'FName': {type: Array},
    'FUserInfo': {},
    'FItem': {}
  }
}
</script>

4、效果如下：