index.vue页面vue文件
route 应该从 useRoute 中获得，确保 route 的值在组件挂载时已经存在。<template>
<div>
<MessageBoard :group="singleGroup" />
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import useUserStore from "@/store/modules/user";
import MessageBoard from "../../components/CodePunch/group/MessageBoard.vue";
import { useRoute } from 'vue-router';
const userStore = useUserStore();
const route = useRoute();
const singleGroup = ref({
groupId: null,
userId: null,
});
onMounted(() => {
const groupId = route.query.groupId; // 获取路由参数中的 groupId
if (groupId) {
singleGroup.value.groupId = groupId;
}
});
</script>
<style scoped>
</style>
MessageBoard.vue组件
使用
watch 监听父组件传入的 groupId，一旦 groupId 发生变化，立即调用 fetchMessages。<template>
<div class="message-board">
<!-- 显示信息或其他UI -->
</div>
</template>
<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue';
const props = defineProps({
group: {
type: Object,
required: true
}
});
const groupId = ref('');
// 监听groupId的值，有改变时调用需要groupId的方法
watch(() => props.group.groupId, (newGroupId) => {
groupId.value = newGroupId;
if (groupId.value) {
fetchMessages(currentPage.value);
}
});
const fetchMessages = async (page) => {
console.log(groupId.value)
};
onMounted(() => {
if (props.group.groupId) {
groupId.value = props.group.groupId;
fetchMessages(currentPage.value);
}
});
onUnmounted(() => {
// 清理资源
});
</script>
<style scoped>
</style>