Blade @props 覆盖传递的属性值答案

【问题标题】：Blade @props overrides passed attribute valueBlade @props 覆盖传递的属性值
【发布时间】：2021-03-15 05:02:58
【问题描述】：

我正在制作一个基于组件的数据表我有一个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>

我还有一个用于表格标题的 head 组件：

@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

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

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

【问题讨论】：

它是一个匿名组件，它是否位于components/head目录中？
@ArturCapraro 不，它是一个位于components/table/head.blade.php 文件的普通组件。
不应该是@unless(!$sortable) 的简单使用@if($sortable) 吗？如果简单打印{{ $sortable }}，返回什么值？
在任何情况下都会返回null。
您是否使用工匠命令php artisan make:component ComponentName 创建了组件？

标签： laravel components laravel-blade

【解决方案1】：

由于它不是匿名组件，所以必须通过组件类的构造函数传递 props，该构造函数位于 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 使组件匿名删除他的类。

【讨论】：

【解决方案2】：

感谢 livewire discord 社区的 Hanley，解决方法是删除生成的类，使组件匿名。

【讨论】：