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、效果如下：