多个组件传递参数，咱们这边有三个界面，App.vue,Home.vue,PostList.vue

App.vue中嵌入home组件，如下：

<script setup>

import Home from './views/Home.vue'

</script>

<template>
 <Home />
</template>

<style scoped>

</style>

Home.vue中嵌入post List组件，如下，其中定义了一个posts属性，然后将posts属性传递给postList组件，<PostList :posts="posts" />注意冒号后边的名称是和postList中定义的属性是对应的，后边双引号中的名字是home中定义的属性的名字：

<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
import PostList from "../components/PostList.vue";
const posts=ref([
    {title:"标题1",body:"vue1",id:1},
    {title:"标题2",body:"vue2",id:2},
    {title:"标题3",body:"vue3",id:3},
    {title:"标题4",body:"vue4",id:4},
    ])
</script>

<template>
    <div class="home">
      <PostList :posts="posts" />
    </div>
</template>

<style scoped>

</style>

PostList.vue代码如下，其中defineProps({
    posts:Array,
})这个是定义属性的，接收传递过来的参数，其中属性名称是和home组件中的冒号后边的名称是对应的，这样就可以进行渲染了：

<script setup>
import { ref, reactive, computed,watch,watchEffect } from "vue";
defineProps({
    posts:Array,
})
</script>

<template>
    <div class="post-list">
        <div v-for="post in posts" :key="post.id">
            {{post.title}}
        </div>
    </div>
</template>

<style scoped>

</style>