案例

父组件：index.vue

<template>
    <div>
        <child1 :name="name" title="标题一"/>
    </div>
</template>
<script>
import { ref } from 'vue'
// 导入子组件
import child1  from '../../components/child1'
export default {
    name: 'index4',
    components: {
        child1
    },
    setup(){
        const name = ref('传入子组件的name');
        return { name }
    }
}
</script>

子组件 child1.vue

<template>
    <div>
        子组件 == {{name1}}, {{title1}}
    </div>
</template>
<script>
import { reactive } from 'vue'
export default {
    name: 'child1',
    props: {
        name: String,
        title: String
    },
    setup(props){
        
        const name1 = reactive(props.name)
        const title1 = reactive(props.title)
        
        return { name1, title1 };
    }
}
</script>