Blade @props 覆盖传递的属性值

Question

我正在制作一个基于组件的数据table我有一个Table组件：

<h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
    {{ $title }}
</h2>
<h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
    {{ $sub_title }}
</h4>
<div class="w-full overflow-hidden rounded-lg shadow-xs">
    <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-no-wrap">
            <thead>
                <tr
                    class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                    {{ $head }}
                </tr>
            </thead>
            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                {{ $body }}
            </tbody>
        </table>
    </div>
</div>

我还有一个用于 table 标题的头部组件：

@props(['sortable' => null,'direction' => null,])
<th {{ $attributes->merge(['class' => 'px-4 py-3 text-xs'])->only('class') }}>
    @unless($sortable)
        <span>
            {{ $slot }}
        </span>
    @else
        <span>
            <button class="flex items-center justify-center">
                <span>{{ $slot }}</span>
                @if ($direction === 'asc')
                    <span>
                        <x-icon.arrow-up />
                    </span>
                @elseif($direction === 'desc')
                    <span>
                        <x-icon.arrow-down />
                    </span>
                @else
                    <span class="opacity-75 hover:opacity-100">
                        <x-icon.arrow-up-down />
                    </span>
                @endif
            </button>
        </span>
    @endunless
</th>

我在我的视图中是这样渲染的：

@extends('layouts.app')
@section('content')
    <x-table>
        <x-slot name="title">
            Dashboard
        </x-slot>
        <x-slot name="sub_title">
            new
        </x-slot>
        <x-slot name="head">
            <x-table.head sortable>#</x-table.head>
            <x-table.head sortable>title</x-table.head>
            <x-table.head>Actions</x-table.head>
        </x-slot>
        <x-slot name="body">
            <x-table.row>
                <x-table.cell>There</x-table.cell>
                <x-table.cell>There</x-table.cell>
                <x-table.cell>There</x-table.cell>
            </x-table.row>
        </x-slot>
    </x-table>
@endsection

所有组件class都是默认生成的class。确切的问题是 $sortable 变量总是 null 并且无法按预期覆盖组件 x-tag 的默认值。

PS1: 我正在重复以下代码： A Simple Table livewire 截屏视频。

Answer 1

感谢 livewire discord 社区的 Hanley，解决办法是删除生成的class，让组件匿名。

Answer 2

因为它不是匿名组件，所以必须通过组件class的构造函数传递道具，位于app/view/components文件夹中，如下所示：

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Head extends Component
{

    public $sortable;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($sortable = false)
    {
        $this->sortable = $sortable;
    }
    /**
     * Get the view / contents that represents the component.
     *
     * @return \Illuminate\View\View
     */
    public function render()
    {
        return view('components.table.head');
    }
}

或者symple使组件匿名删除他的class。

Blade @props 覆盖传递的属性值

Blade @props overrides passed attribute value

components

laravel

laravel-blade