求教 vue3 下路由传参给子组件后，子组件列表如何能实时渲染

[juventusryp]

描述：

• 想在 message.vue 中点击 button 按钮后向子组件的数组中传入一个值，然后在子组件 detail.vue 的页面中能够实时的渲染显示。
• 知道肯定要向 detail.vue 中的 messageList 数组中 push 传入的参数，但是不知道具体怎么写，特来求教，先行谢过。

// message.vue
<template>
  <li v-for="m in messageList" :key="m.id">
    <router-link
      :to="{ name: 'Detail', query: { id: m.id, title: m.title } }"
      >{{ m.title }}</router-link
    >
    <button @click="pushShow(m)">push 查看</button>
  </li>
  <hr />
  <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
let messageList = [
  { id: "004", title: "message004" },
  { id: "005", title: "message005" },
  { id: "006", title: "message006" },
];

const router = useRouter();

const pushShow = (m: { id: string; title: string }) => {
  router.push({ name: "Detail", query: { id: m.id, title: m.title } });
};
</script>

<style scoped lang="less"></style>

// detail.vue
<template>
  <li v-for="m in messageList" :key="m.id">
    {{ m.title }}
  </li>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";

let messageList = reactive([
  { id: "001", title: "message001" },
  { id: "002", title: "message002" },
  { id: "003", title: "message003" },
]);

const route = useRoute();
</script>

<style scoped lang="less"></style>

[sjhhjx0122]

最简单的就是，messageList 并不在 detail 里维护，detail 只渲染单条，在 message.vue 维护 messageList ，然后循环 detail props 传入单条数据

[leoQaQ]

用 watch ？

[hevi]

onMounted 的时候，把传进来的值 push ，然后消除 query
或者 watch ，push 后消除 query

[yigecaiji]

不用 push ，用 set ？