如何向Inertia框架的layout组件传递slot插槽或prop属性？

问题根因 #

使用Inertia默认的layout: 组件配置方式时，Inertia只会将当前页面组件整体作为布局的默认插槽传入，页面内定义的具名插槽不会自动透传到布局组件。同时你原有CardLayout中直接用{{ $slots.title }}插值的写法不符合Vue规范，$slots是虚拟节点数组，不能直接作为文本渲染。

修正步骤 #

第一步：修正CardLayout代码 #

将插槽渲染改为标准Vue语法：

<template>
    <h1><slot name="title" /></h1>
    <slot/>
</template>

第二步：选择对应传值方案 #

方案A：页面内直接嵌套布局（最直观，推荐）

无需使用Inertia的layout配置，按普通Vue组件方式嵌套传值即可，修改ForgotPassword组件：

<template>
    <CardLayout>
        <template #title>Forgot Password</template>
        Forgot pw stuff goes here...
    </CardLayout>
</template>

<script>
import CardLayout from "@/Layouts/CardLayout";

export default {
    // 移除原有layout配置
}
</script>

方案B：使用函数式layout配置（需要保留Inertia layout配置时用）

将layout属性改为函数，手动用渲染函数传递插槽和Props：

<script>
import CardLayout from "@/Layouts/CardLayout";
import { h } from 'vue'

export default {
    layout() {
        return h(CardLayout, 
            // 第二个参数为要传递给布局的Props，无需传Props可留空
            {
                customProp: '自定义属性值'
            },
            // 第三个参数为要传递的插槽
            {
                title: () => 'Forgot Password',
                default: () => this.$slots.default()
            }
        )
    },
}
</script>

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