如何从控制器将 `$attributes` 值注入到匿名刀片组件

Question

假设我有以下名为

badge

的匿名刀片组件：

@props(['text'])

<span {{ $attributes->merge(['class' => 'text-bold']) }}>
    {{ $text?? '-' }}
</span>

如果我要从刀片页面使用它，我可以定义

$text

的值并定义一些附加类，如下所示：

<x-badge class="text-red" :text="This is dangerous" />

现在我的问题是：如何从控制器执行上述操作？使用下面的代码...

function index() {
    return view('components.badge', ['text' => 'This is dangerous', 'class' => 'text-red']);
}

// results
// <span class="text-bold">This is dangerous</span>

...将导致

badge

组件具有

$text

的

This is dangerous

，但

text-red

未 添加到其类中。我相信这是因为传递给视图组件的

class

成为“属性”而不是“类属性”，从而阻止它被合并到

$attribute->merge(['class' => 'text-bold'])

中定义的默认类。

解决这个问题的方法是将

badge

组件更改为如下所示：

@props(['text', 'class' => ''])         // <---- add `class` property with empty string as default

<span {{ $attributes->merge(['class' => 'text-bold '.$class]) }}>   // <---- print the `class` property directly here
    {{ $text?? '-' }}
</span>

然而，这感觉像是一个诡计而不是正确的方法。所以我正在寻找一种从控制器来克服这个问题的方法，而不是上面的方法。

您的帮助对我来说意义重大。谢谢！

Answer 1

Laravel Blade 组件中的

$attributes

参数允许您从控制器向 Blade 组件提供额外的 HTML 属性。但是，您必须保证准确指定属性。在组件定义中，更新徽章组件以接受

class

属性：

@props(['text', 'class' => 'text-bold'])  <!-- Default class is 'text-bold' -->

<span {{ $attributes->merge(['class' => $class]) }}>
    {{ $text ?? '-' }}
</span>

您可以在控制器中提供

class

属性作为类数组，它将与默认类组合：

function index() {
    return view('components.badge', [
        'text' => 'This is dangerous',
        'class' => ['text-red', 'other-class'], // You can pass multiple classes as an array
    ]);
}

控制器中的类将以这种方式与徽章组件中定义的默认类混合。