无法将变量传递给 Laravel x 组件

Question

我正在 Laravel 8 中的某些地方使用 x 组件构建一个网页。组件是存在于所有页面中的模式，但其内容必须根据调用它的页面而变化。

我的想法如下：

1. IndexController 使用 PageModel 将 $pageid 传递到 index.blade 视图
2. index.blade 将 $pageid 传递给 x-insert-section 组件
3. x-insert-section组件在@switch指令中使用它来显示每页所需的内容

问题是 x-insert-section 似乎没有在 $pageid 中收到任何值。

代码如下：

我的IndexController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Models\Page;
use App\Models\Entry;
use Illuminate\Http\Request;

class IndexController extends Controller
{
    public function init(Request $request)
    {

        $page = Page::where('slug', '/')->first();

        return view('index', [
            'page' => $page,
            'entries' => Entry::where('page', $page->id)->get(),
            'pageid' => $page->id
        ]);
    }
}

index.blade.php 加载 x 组件的部分

    <x-insert-section :pageid="$pageid"></x-insert-section>
    <x-insert-jumbo-image :pageid="$pageid"></x-insert-jumbo-image>

InsertSection.php 组件

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class InsertSection extends Component
{

    public function __construct(){}

    public $pageid;

    public function render()
    {
        return view('components.insert-section');
    }
}

insert-section.blade.php的视图（开关内容已被注释替换以减少代码长度）

<div class="modal fade" id="create-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modal-entry-title"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

        @switch($pageid)
            @case('1')
                      <!-- Form type 1 -->
                @break

            @case('3')
                      <!-- Form type 2 -->
                @break

            @default
               Default Case
        @endswitch

        </div>
        <div class="modal-footer">
            <button id="confirm-entry" type="submit" form="create-form" class="btn btn-primary">{{$pageid}}</button>
        </div>
        </div>
    </div>
</div>

注意：我尝试过使用“1”和 1 作为 switch case 的值，甚至发送编码字符串，但都不起作用

最后，调用模态时屏幕上的结果。未加载任何表单，并且开关解析为默认情况。

任何帮助将不胜感激。

Answer 1

事实证明我在阅读文档后找到了解决方案（祝福他们，该死的我糟糕的阅读）

缺少的部分是接收变量的构造函数，因此代码会这样更改。

InsertSection.php 组件

来自：

    public function __construct(){}

    public $pageid;

致：

    public $pageid;

    public function __construct($pageid)
    {
        $this->pageid = $pageid;
    }

我知道我知道，很有道理，但我想下次我会记住它。

Answer 2

如果你想在 Laravel 中向组件传递变量，有两种方法可以实现，

1. 在没有任何控制器的组件中使用@props，

2. 但是在您的代码中您有一个控制器，因此只需在控制器的构造函数中初始化您的变量即可。

   公共$pageid;

   公共函数 __construct($pageid) { $this->pageid = $pageid; }

Answer 3

另外，请关注https://laravel.com/docs/10.x/blade#casing。

将变量传递给组件（例如 $page_id）将不起作用。它应该是 $pageid 或 $pageId。