Laravel如何根据href参数动态切换HTML标签 实现类似Vue的:is功能

一共提供两种实现方式，适配不同版本Laravel：

方式1：用Laravel内置动态组件（推荐，Laravel 9+支持） #

不用写分支判断，完全实现类似Vue的:is动态标签效果：

1. 如果你用匿名组件，直接创建resources/views/components/link.blade.php，写入以下代码：

@props([
    'href' => null
])
@php
    // 动态判断要渲染的标签
    $renderTag = filled($href) ? 'a' : 'span';
@endphp

<x-dynamic-component 
    :component="$renderTag" 
    :href="$href" 
    {{ $attributes }}
>
    {{ $slot }}
</x-dynamic-component>

2. 调用方式和你原有写法完全一致，不需要修改业务代码：

<x-link :href="$href">
    some text
</x-link>

方式2：分支判断写法（兼容所有Laravel版本） #

如果你的Laravel版本低于9，没有内置动态组件，用分支判断即可，同样不需要修改调用代码：
在resources/views/components/link.blade.php写入：

@props([
    'href' => null
])

@if(filled($href))
    <a href="{{ $href }}" {{ $attributes }}>
        {{ $slot }}
    </a>
@else
    <span {{ $attributes }}>
        {{ $slot }}
    </span>
@endif

如果你用的是类组件，只需要在组件类的构造方法里计算好$renderTag的值传给模板即可，模板逻辑和上面一致。

效果验证 #

• 当$href有值时，渲染结果：<a href="传入的地址" 其他透传属性>some text</a>
• 当$href为空/未传时，渲染结果：<span 其他透传属性>some text</span>
  所有额外传入的class、id、target等属性都会自动透传，完全不需要修改原有业务调用逻辑。

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