props可以实现父子组件通信,在vue3中我们可以通过defineProps获取父组件传递的数据。且在组件内部不需要引入defineProps方法可以直接使用!
父组件给子组件传递数据
<Child info="天青色等烟雨" :money="money"></Child>
子组件获取父组件传递数据:方式1
let props = defineProps({//对象写法
info:{
type:String,//接受的数据类型
default:'默认参数',//接受默认数据
},
money:{
type:Number,
default:0
}})
子组件获取父组件传递数据:方式2
//需要使用到defineProps方法去接受父组件传递过来的数据
//defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(["info",'money']);//数组写法
子组件获取到props数据就可以在模板中使用了,但是切记props是只读的(只能读取,不能修改)