Vue页面添加多组件时props传递失效问题求助

在Vue项目中，MatchCard.vue组件被用于MatchCardView.vue页面。用户点击列表项的router-link跳转至MatchCardView.vue时，列表项对应的id会以prop形式传递给MatchCard.vue，原本逻辑正常，能展示对应信息。但只要在MatchCardView.vue中添加任意其他组件，prop mId就会变成undefined，导致后续axios请求失败，已排除组件冲突。

相关代码 #

MatchCard.vue #

<script>
import axios from "axios";
import {useInviteStore} from '../Stores/inviteStore';

export default {
  props: ['mId'], // 接收路由传来的id作为prop
  created() {
    console.log(this.mId); // 测试用：控制台打印id
  },

  data() {
      return {
        matches: []
      };
    },
    setup(){
      
    const inviteStore = useInviteStore();
    return { 
      invited: inviteStore.$state.invited, 
      pushInvite: inviteStore.pushInvite, 
      setMatchId: inviteStore.setMatchId
    };
  },
    async mounted() {
      console.log(this.mId);
      await axios.get(`https://localhost:8080/match/matchpost/${this.mId}`, { withCredentials: true })
        .then(response => {
          this.matches = response.data;
        })
        .catch(error => {
          console.log(error);
        });
        this.push();
    },
    methods:{
      
      push() {
    console.log('push method called'); // 调试用
    console.log(this.setMatchId); // 调试用
    this.setMatchId(this.mId);
      }
    }

}
</script>

MatchCardView.vue #

<script setup>
import MatchCard from '../components/MatchCard.vue';
import FriendsList from '../components/FriendsList.vue';
</script>

<template>
<FriendsList />    
<MatchCard />
</template>

路由文件(index.js) #

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import MatchCard from '../views/MatchCardView.vue';
import {useAuthStore} from '../Stores/userStore.js';
import axios from 'axios';

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/MatchesView.vue'),
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue'),
  },
  {
    path: '/matches',
    name: 'matches',
    component: () => import('../views/MatchesView.vue'),
  },
  {
    path: '/signin',
    name: 'signin',
    component: () => import('../views/SignIn.vue'),
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/RegistrationView.vue'),
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('../views/ProfileView.vue'),
    meta:{
      requiresAuth: true,
    }
  },
  {
    path: '/matchform',
    name: 'matchform',
    component: () => import('../views/MatchPostView.vue'),
    meta:{
      requiresAuth: true,
    }
  },
  {
    path: '/profile/dashboard/:userId',
    name: 'otherProfiles',
    component: () => import('../views/OtherProfilesView.vue'),
    meta:{
      requiresAuth: true,
    }
  },
  {
    path: '/ninjaspotter',
    name: 'ninjaspotter',
    component: () => import('../views/NinjaSpotterView.vue'),
    meta:{
      requiresAuth: true,
    }
  },
  {
    path: '/matchcard',
    name: 'matchcard',
    component: () => import('../views/MatchCardView.vue'),
  },
  {
    path: '/match/:mId',
    name: 'MatchDetail',
    component: () => import('../views/MatchCardView.vue'),
    props: true,
    meta:{
      requiresAuth: true,
    }
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

router.beforeEach(async (to, from, next) => {
  const auth = useAuthStore();

  // 每次路由导航时刷新认证状态
  await auth.fetchUser();

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (auth.isAuthenticated) {
      next();
    } else {
      next('/'); // 未认证则重定向到首页
    }
  } else {
    next(); 
  }
});

export default router;

已尝试的解决方法 #

• 监听prop的变化
• 更换组件排除冲突
• 使用不同方式设置prop

解决方案 #

问题核心：路由中配置的props: true是将路由参数传递给页面组件MatchCardView.vue，而非直接传递给它内部的子组件MatchCard.vue。之前未添加其他组件时，可能因逻辑混淆误让子组件拿到了值，但添加新组件后，这个隐式传递的逻辑被打破，导致mId变为undefined。

修复步骤 #

1. 在MatchCardView.vue中接收路由传递的mId

<script setup>
import MatchCard from '../components/MatchCard.vue';
import FriendsList from '../components/FriendsList.vue';
// 定义并接收路由传来的mId prop
const props = defineProps(['mId']);
</script>

2. 将mId显式传递给MatchCard子组件

<template>
<FriendsList />    
<!-- 把页面组件拿到的mId传递给子组件 -->
<MatchCard :mId="props.mId" />
</template>

额外优化建议 #

你的MatchCard.vue混用了选项式API和组合式API，虽然Vue允许这种写法，但可能引发生命周期执行顺序、上下文指向等潜在问题。建议统一为Vue3推荐的组合式API写法：

<script setup>
import axios from "axios";
import { useInviteStore } from '../Stores/inviteStore';
import { ref, onCreated, onMounted } from 'vue';

// 定义接收的prop
const props = defineProps(['mId']);
const inviteStore = useInviteStore();
const matches = ref([]);

onCreated(() => {
  console.log(props.mId);
});

onMounted(async () => {
  console.log(props.mId);
  try {
    const response = await axios.get(`https://localhost:8080/match/matchpost/${props.mId}`, { withCredentials: true });
    matches.value = response.data;
  } catch (error) {
    console.log(error);
  }
  push();
});

const push = () => {
  console.log('push method called');
  console.log(inviteStore.setMatchId);
  inviteStore.setMatchId(props.mId);
};

// 暴露需要在模板中使用的变量
defineExpose({
  matches,
  invited: inviteStore.$state.invited,
  pushInvite: inviteStore.pushInvite
});
</script>

内容的提问来源于stack exchange，提问作者Jerome Zerovnik