vue3父传子

1.father.vue

<template>
   <div>
      <Son :data=name></Son> 
   </div>
</template>
<script>
import Son from './son'
export default {
   components:{
      Son
   },
   setup() {
      const name = '小范'
      return{
         name
      } 
   }
}
</script>

2.son.vue

<template>
   <div>
    {{data}}
   </div>
</template>
<script>

//第一种写法
export default {
   props:['data'],
   setup(props,context) {
      console.log(props)
      console.log(context)
      console.log(props.data,'father text')
      return{  
      }
   }
}
//第二种写法 这个比较优雅
export default {
   props:{
        data:{
            type:String,
            default:'',
            des:'标题名'
        }
    },,
   setup(props,context) {
      console.log(props)
      console.log(context)
      console.log(props.data,'father text')
      return{  
      }
   }
}
</script>

setup的两个参数.props接收 context传出