如何避免Laravel组件$attributes包含带冒号的传入变量

你遇到的核心问题是：Blade没有将带:的属性识别为组件的props，所以这些属性被当作普通HTML属性混入了$attributes，最终渲染到了DOM元素上。而Laravel文档里的:message能被排除，是因为对应的组件已经定义了message这个props，Blade会自动将匹配的属性从$attributes`中移除。

解决方法很简单，只需要在组件中明确声明需要接收的props即可：

方法1：匿名组件（纯视图文件） #

在你的text-with-heading.blade.php开头添加@props指令，声明title和test作为组件的props：

@props(['title', 'test'])

<div {{ $attributes->merge(['class' => "m-4"]) }}>
    <a href="#{{$attributes->get('id')}}">
        <h4 class="text-turquoise-500 font-semibold">
            {{ $title }}
        </h4>
    </a>
    {{ $slot }}
</div>

这样修改后，调用组件时的:title和:test会被Blade识别为组件的props，不再被包含到$attributes中，渲染后的HTML就不会出现多余的title和test属性了：

<div class="m-4" id="aircrafts">
    <a href="#aircrafts">
        <h4 class="text-turquoise-500 font-semibold">
            Aircrafts
        </h4>
    </a>
    <div class="flex">
        <p>
            Some text here
        </p>
    </div>
</div>

方法2：类组件 #

如果你的组件是基于类实现的，直接在组件类中声明对应的属性并在构造函数中接收即可：

namespace App\View\Components;

use Illuminate\View\Component;

class TextWithHeading extends Component
{
    public $title;
    public $test;

    public function __construct($title, $test)
    {
        $this->title = $title;
        $this->test = $test;
    }

    public function render()
    {
        return view('components.text-with-heading');
    }
}

这种方式下，Blade同样会自动将:title和:test从$attributes中排除，避免它们被渲染为HTML属性。

额外说明 #

哪怕某些props你不需要在组件中使用，但只要通过@props或类属性声明了，Blade就会将对应的带:的属性从$attributes`中移除，不会出现在最终的HTML里。

内容的提问来源于stack exchange，提问作者NotDavid