在组件内使用刀片值答案

【问题标题】：Use blade value inside a component在组件内使用刀片值
【发布时间】：2021-02-04 02:44:09
【问题描述】：

目前，我可以通过使用键调用变量，在刀片视图中成功显示一些生成的内容，如下所示：

<div>
{{ $data['key'] }}
</div>

我想要实现的是，例如重用类名的键。原因是我想通过使用选择器通过 JavaScript 轻松访问此内容。看起来像这样的东西：

<div class='key'>
{{ $data['key'] }}
</div>

此代码有效，但由于我有很多字段，我想避免重复密钥。为了实现这一点，我想到了创建一个刀片组件，并在插槽中传递密钥。这样我就可以在类名和数据占位符中重用这个键。但似乎我的变量 {{ $data }} 无法从我的组件文件中访问，因为它会引发错误：$data is undefined。

这是我的代码：

<!-- In main.blade.php -->
@component('my-component')
key
@endcomponent

<!-- In my-component.blade.php -->
<div class="{{ $slot }}">
{{ $data[$slot] }}
</div>

我对 Blade 不熟悉，因此如有必要，我愿意接受另一种方法。

【问题讨论】：

如果你不想使用 larvel 组件，那么你可以将数据传递给组件，例如@component('my-component',['keyname' => $data])

【解决方案1】：

您应该将数据和键作为参数传递给组件，从而更加明确。您不需要为此使用插槽，因为插槽通常用于文本或 HTML 块，而不用于简单属性。

像这样创建你的组件，

<div class="{{ $key }}">
    {{ $data[$key] }}
</div>

然后这样渲染

@component('my-component', ['data' => $data, 'key' => 'key'])

【讨论】：