vue3 子组件接收父组件的值(defineProps )

父组件

    <template>
    <div>
   
   <Menu 
     title="66" 
    :data="list" />
    </div>
</template>
//ts
<script setup lang="ts">
//js
//<script setup>
import {reactive  ,ref}  from 'vue' 
const  list=reactive<number[]>([1,2]);//Ts写法
//const  list=reactive([1,2]);//js写法
</script>


<style scoped>

</style>

子组件

<template>
    <div class="menu">
          <div class="">
            {{title}}
           {{data}}
          </div> 
    </div>
</template>

<script setup lang="ts">
import  {reactive, defineProps }  from 'vue';
 
 
type person={
    title?:string,
    data?:number[]
}

// defineProps接收父组件传输的值
defineProps<person>(); 
//默认参数  当父组件不传输title的时候 那么子组件就使用的是title默认参数(我是默认值) 不定义类型person就会报错
withDefaults(defineProps<person>(),{title:'我是默认值',data:()=>[1,2,3,3]})
 //js
 defineProps({title:'',data:[]});
</script>

<style scoped>
.menu{
    width: 100px;text-align: center;
    border: 1px solid #000;
    height: 100vh;
}
</style>