如何在Livewire父子组件间传递并渲染HTML内容？

核心解决方案：跳过HTML转义渲染 #

Livewire默认会自动转义HTML内容，直接传递带<br>等标签的字符串会被当作文本输出。要实现HTML渲染，只需在子组件的Blade视图中使用未转义输出语法{!! $变量名 !!}：

示例代码

1. 父组件传递带HTML的变量：

<livewire:hero :hero_text="$hero_text" />
// 或Blade组件语法
<x-hero :hero_text="$hero_text" />

其中$hero_text的值可以是类似'主标题<br>副标题'的字符串。

2. 子组件的Blade视图（resources/views/livewire/hero.blade.php）：

<div class="hero-section">
    {!! $hero_text !!}
</div>

关键注意事项：XSS安全防护 #

直接渲染未过滤的HTML存在XSS攻击风险，尤其是当$hero_text包含用户输入内容时，必须先做净化处理：

• 允许指定标签：用Laravel字符串方法保留安全标签，过滤其他标签：

$safeHeroText = \Illuminate\Support\Str::of($hero_text)->stripTags(['<br>', '<p>', '<strong>'])->toString();

• 全面HTML净化：使用spatie/laravel-html-sanitizer包，配置允许的标签和属性后对内容做彻底净化：

$purifiedText = \Spatie\HtmlSanitizer\HtmlSanitizer::create()->sanitize($hero_text);

替代方案：使用插槽传递HTML #

如果不需要通过变量传递，也可以直接用Blade插槽传递HTML内容，同样能实现多样配置：
父组件：

<livewire:hero>
    主标题<br><small>副标题</small>
</livewire:hero>

子组件视图：

<div class="hero-section">
    {{ $slot }}
</div>

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