为什么 laravel 组件没有呈现在刀片文件中？

Question

在我的 Laravel 8 / tailwindcss 2 / Alpinejs 2.8 应用程序中 我用命令创建 laravel 组件

php artisan make:component  Admin/ListingHeader

但是在我的一个刀片文件中调用这个组件，比如

<div class="editor_listing_wrapper" x-data="adminCategoryListingComponent()">
    111111<x-admin.listing-header
    :icon-hint="'Categories of the app'"
    :items-length= "{{ count($categories) }}"
    :items-total-count= "{{ $totalCategoriesCount }}"
    />99999999

这个组件没有渲染，正如我在浏览器中看到的那样：https://prnt.sc/zulwm0

我想我设置了一个有效的路径

<x-admin.listing-header

因为生成的模板位于 resources/views/components/admin/listing-header.blade.php

我更喜欢创建 laravel 组件，但是为什么不渲染呢？如何解决？

修改块：

app/View/Components/Admin/ListingHeader.php:
<?php

namespace App\View\Components\Admin;

use Illuminate\View\Component;

class ListingHeader extends Component
{
    public $iconHint= '';
    public $itemsLength= 0;
    public $itemsTotalCount= 0;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct(string $iconHint, int $itemsLength, int $itemsTotalCount)
    {
        $this->iconHint= $iconHint;
        $this->itemsLength= $itemsLength;
        $this->itemsTotalCount= $itemsTotalCount;
    }

    public function render()
    {
        return view('components.admin.listing-header');
    }
}

和资源/视图/组件/admin/listing-header.blade.php：

<div class="p-2 pt-6 mb-4 flex">
    <div class="w-10/12 justify-start align-top">
        <h3 class="m-1 text-center flex items-center d1">
            <x-icon-svg :icon="'category'" :title="'{{ $iconHint }}'"></x-icon-svg>
            <span class="ml-2">
                        {{ $itemsLength }}&nbsp;@choice('category|categories', $itemsLength) from {{ $itemsTotalCount }}
                        </span>
        </h3>
    </div>
    <div class="w-2/12 m-1 flex justify-end items-center align-top d2">
                    <span @click="refreshCategoriesListing()" class="mr-5">
                        <x-icon-svg :icon="'refresh'" :title="'Refresh categories listing'" ></x-icon-svg>
                    </span>
        <span onclick="document.location.href='{{ route('admin.categories.create') }}'">
                        <x-icon-svg :icon="'add'" title="Add new category" ></x-icon-svg>
                    </span>
    </div>
</div>

修改块 #2：

我做了一些测试简化示例并删除了我创建的组件 一个新组件，但不在 admin 目录下使用命令：

PHP artisan make: component  ListingHeader

我填写了 app/View/Components/ListingHeader.php ：

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class ListingHeader extends Component
{

    public $iconHint= '';
    public $itemsLength= 0;
    public $itemsTotalCount= 0;

    public function __construct(string $iconHint= '', int $itemsLength= 0, int $itemsTotalCount= 0)
    {
        $this->iconHint= $iconHint;
        $this->itemsLength= $itemsLength;
        $this->itemsTotalCount= $itemsTotalCount;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|string
     */
    public function render()
    {
        \Log::info(  varDump(-1, ' -1 render ListingHeader::') );
        return view('components.listing-header');
    }
}

在 /resources/views/components/listing-header.blade.php 中：

<div>
    <h1>resources/views/components/listing-header.blade.php::{{ $iconHint  }}</h1>
    <!-- Very little is needed to make a happy life. - Marcus Antoninus -->
</div>

并写入父 index.blade.php ：

111111<x-listing-header
    :icon-hint="'Categories of the app'"
/>222222

我看到渲染文本正常，$iconHint var 的有效值 但是如果在父 index.blade.php 中传递 laravel 值：

111111<x-listing-header
    :icon-hint="'Categories of the app'"
    :items-length= "{{ count($categories) }}"
/>222222

组件文本内没有使用双参数渲染组件：https://prnt.sc/103oq9y

无法捕捉为什么会这样？如果通过哪种方式传递参数？ 我想组件在服务器端渲染，不可能有高山混淆......

谢谢！

Answer 1

看起来错误出现在一对空间中：

  :key-name= "KeyValue"

没有空格也可以"

    <x-listing-header
        :icon-hint="'Categories of the app'"
        :items-length="count($categories)"
        :items-total-count="$totalCategoriesCount"
    />