inertia vue, send props to sub components?-CodePudding

I have two components :

Page.vue
- Component.vue

In my Laravel route I do

return inertia('Page', [ 'foo' => Model::all()->map(...) ]);

In Page I do:

<template> 
  <Component/>
</template>
<script setup>
    defineProps({ foo: Array });
</script>

Would it be possible to access foo, without transiting by Page? When using nested components. It looks cumbersome to always forward props like <Component :foo='foo'>.

In this case, only Component use foo which is not directly used in Page.

CodePudding user response：

This video on Laracasts is a great starting point for your topic https://laracasts.com/episodes/2404

CodePudding user response：

You can share a prop data to a subcomponent this way:

Route:

Route::get('/example', function () {
    return inertia('Page', [
        'someData' => 'foo'
    ]);
});

1st component (Page.vue) - Here you pass in the data to the subcomponent:

<template>
  <Component :someData="$page.props.someData" />
</template>

<script setup>
  import Component from '../Pages/Component.vue'
</script>

2nd component (Component.vue) - And here you retrieve it:

<template>
  {{ someData }}
</template>

<script setup>
  const props = defineProps({
    someData: String,
  })

  const someData = props.someData
</script>