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