Vuejs3父组传值给子组件

父组件代码

<script setup>
import TextProps from './components/TextProps.vue';
import { reactive } from 'vue';const queryobj = reactive({"a":1, "b":1});
const aryobj = reactive([1,2,3]);</script><template><div class="main"><TextProps></TextProps><br/><TextProps message="test1"></TextProps><br/>  <TextProps message="test2" :aryobj="aryobj" :obj="queryobj" ></TextProps></div>
</template> 

子组件代码

<template><button @click="clicked()">{{message}} + {{ aryobj }}</button>
</template><script setup lang="ts">
import {  } from 'vue';const props = defineProps({message : {type : String,required: true,default: "默认值"},obj : {type : Object},aryobj : {type : Array,default : []},callback : {type : Function,default(){return "function";}}
})function clicked()
{console.log(props.message, props.obj, props.aryobj);
}</script><style></style>

重点需要 <script setup>这种方式是需要定义 const props = defineProps({});

不然使用this.$props是undefined