Nuxt中Layout的Slot无法接收Prop问题排查与解决

问题原因 #

1. 插槽传值未被正确接收：Layout组件通过作用域插槽传递language，但Login页面未使用v-slot接收插槽参数，直接用defineProps无法获取该值（页面是插入到插槽中，并非Layout的直接子组件，无法通过常规props接收）。
2. 响应式变量赋值错误：message是ref响应式对象，直接赋值message = {...}会破坏响应式绑定。
3. 变量未正确解构：即使通过defineProps声明了language，也未从props对象中解构出变量，导致代码中直接使用language时出现未定义错误。

修复步骤 #

1. 接收插槽传递的language参数 #

修改Login页面的模板，通过v-slot（缩写#）接收Layout插槽的作用域参数：

<template #default="{ language }">
  <AuthForm kind="login" :language="language" :message="message" @submitted="login" />
</template>

2. 修正响应式变量赋值 #

将message的直接赋值改为通过.value修改，保留响应式：

<script setup>
import AuthForm from "../components/auth-form.vue";
const message = ref({})

async function login(value) {
  try {
    const data = await api('login', value);
    // 用.value修改ref对象的值
    message.value = { type: 'success', message: languages[language]['loggedIn'] }
  } catch (error) {
    message.value = { type: 'error', message: languages[language][error.statusMessage] }
  }
}
</script>

3. 移除无效的defineProps #

由于language是从插槽作用域获取的，不需要再通过defineProps声明，直接删除代码中的const props = defineProps(['language'])即可。

补充说明 #

作用域插槽的核心逻辑是：父组件通过插槽传递参数，插槽内容（子组件/页面）必须显式接收这些参数才能使用，这和常规的父子组件props传递是不同的机制。在Nuxt的布局系统中，页面组件默认插入到Layout的插槽中，因此必须通过v-slot接收插槽传递的变量。

内容的提问来源于stack exchange，提问作者Kamran İbrahimov