Inertia + Vue 嵌套组件能否跳过父组件直接获取props？

可以直接让Component.vue获取foo，无需通过Page.vue转发props，根据你使用的Vue版本，有两种简单的实现方式：

Vue 3 项目（使用 <script setup>） #

在Component.vue中，直接利用Inertia提供的usePage钩子获取全局的页面数据：

<script setup>
import { usePage } from '@inertiajs/vue3'

// 从全局page对象中提取foo，自带响应式特性
const { foo } = usePage().props
</script>

Vue 2 项目 #

在Component.vue中，通过this.$page访问全局数据，并用计算属性包装以保证响应式：

<script>
export default {
  computed: {
    foo() {
      return this.$page.props.foo
    }
  }
}
</script>

原理说明 #

Laravel路由通过Inertia传递的所有props，都会被存储在Inertia的全局page对象中，项目内任意组件都可以直接访问该对象，无需经过父组件手动转发，彻底省去繁琐的props传递操作。

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