一、Props传递静态数据
SupComponent.vue
<template>
<div>
<h1>子组件</h1>
{{username}} ，{{address}}
</div>
</template>
<script setup>
defineProps(['username',"address"])
</script>
<style>
</style>MyParentComponent.vue
<template>
<div>
<p></p>
<SubComponent username="张飞飞" address="北京市"></SubComponent>
</div>
</template>
<script setup>
// 引入组件
import SubComponent from './SubComponent.vue';
</script> 
二、Props传递动态数据
<SubComponent :username="msg" :address="addr"></SubComponent>
</div>
</template>
<script setup>
import {ref} from 'vue'
// 引入组件
import SubComponent from './SubComponent.vue';
const msg=ref('米克')
const addr=ref('杭州市')
</script> 
三、单向数据流
如果需要更改 prop 有以下两种场景：
<script setup>
import {ref,computed} from 'vue'
const props=defineProps({
count:{
type:Number,
default: 1 // Number 类型的默认值
},
size:{
type:String,
default: 'book' //默认值
}})// 只是将 props.count 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const mycount=ref(props.count) 
// 该 prop 变更时计算属性也会自动更新
const mySize = computed(() => props.size.trim().toUpperCase()) 
四、props校验
props语法
- 类型校验
- 非空校验
- 默认值
- 自定义校验
子组件Children.vue
<template>
<div>
{{username}} {{age}} {{flag}} <br/><br/>
{{hobby}} <br/><br/>
{{emp}} <br/><br/>
</div>
</template>
// 注意:必须使用setup,否则不能渲染
<script setup>
import {ref,computed} from 'vue'
const props=defineProps({
username:{
type:String,
required: true //父组件，必须传递值
},
age:{
type:[Number,String], // 传递过来的数据，可以是数字或字符串
default: 18 //如果父组件不传，则默认值
},
flag:{
type:Boolean
},
hobby:Array, // 表示只校验类型，类型是数组即可
emp:{
default:()=>{
return{} // 对于默认值是数组或对象的情况，默认值要写一个函数，函数中返回默认值
}
},
show:Function // 表示只校验类型，类型是函数即可
})
</script>
<style>
</style>父组件Mother.vue
<template>
<div>
<p></p>
<Children username="mike"
:age="re.age"
:flag="re.flag"
:hobby="re.hobby"
:emp="re.emp"
:show="re.show"
></Children>
</div>
</template>
<script setup>
import Children from "./Children.vue"
import {ref,reactive} from 'vue'
//父传子的类型数据
const re = reactive({
age:20,
flag: true,
hobby: ['play','sleep','read'],
emp:{name:'john',gender:'man'},
show(){
console.log('I am props!')
}
})
</script>
注意：
