Laravel中使用components与extends结合section&yield的区别是什么？

这俩都是Laravel实现视图复用的方案，但设计思路、适用场景完全不同，具体区别如下：

1. 核心定位与适用场景 #

• extends+section/yield：主打页面级布局复用，用来搭建整个页面的固定骨架，比如通用的页眉、页脚、侧边栏这类全局结构。子视图只需要填充布局中预留的区块，适合统一整个项目的页面结构。
• Components：主打组件级复用，针对独立的UI/逻辑单元，比如按钮、卡片、表单输入框、弹窗这类可以在多个页面重复使用的小模块，甚至能封装带业务逻辑的功能单元。

2. 复用粒度 #

• extends是粗粒度复用：一次复用整个页面框架，子视图只能围绕布局预留的yield区块做填充或覆盖，无法拆分更小的单元。
• Components是细粒度复用：单个组件可以独立存在、独立调用，还能嵌套使用（比如卡片组件里嵌套按钮组件），复用的是单个功能单元。

3. 数据传递方式 #

• 使用extends时，数据一般由控制器传递到子视图，布局自动共享子视图的变量，数据传递比较间接；如果要继承区块内容，只能用@parent语法追加。
• Components支持明确的参数传递：调用时直接通过属性传值，比如<x-button text="提交" :disabled="$isDisabled" />，还能通过组件类的构造函数接收参数，甚至在组件类里处理数据，组件内部逻辑更自治。

4. 逻辑封装能力 #

• extends的逻辑完全混在Blade模板里，没有专门的逻辑载体，布局和子视图的代码都堆在模板文件中，复杂逻辑容易导致模板臃肿。
• Components可以搭配专属PHP类（继承Component类），把业务逻辑从模板中抽离出来，模板只负责渲染，实现逻辑与视图的分离。比如在组件类里处理数据格式化，模板直接使用处理后的变量。

5. 灵活性与扩展性 #

• extends的扩展性局限于区块的覆盖与继承，比如用@parent追加区块内容，但整体结构受限于布局的初始定义，无法灵活定制局部结构。
• Components支持**插槽（Slots）**功能，调用时可以传入自定义内容，比如：

  <x-card>
      <p>这是卡片的自定义内容</p>
  </x-card>
  

  还支持命名插槽，满足更复杂的组件内容定制；另外组件可以注册为全局组件，在任何视图直接调用，无需额外引入。

简单示例对比 #

extends+section/yield示例

布局文件layouts/app.blade.php：

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>网站通用页眉</header>
    <main>@yield('content')</main>
    <footer>网站通用页脚</footer>
</body>
</html>

子视图home.blade.php：

@extends('layouts.app')

@section('title', '首页')

@section('content')
    <h1>欢迎访问首页</h1>
@endsection

Components示例

按钮组件类app/View/Components/Button.php：

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    public $text;
    public $disabled;

    public function __construct($text, $disabled = false)
    {
        $this->text = $text;
        $this->disabled = $disabled;
    }

    public function render()
    {
        return view('components.button');
    }
}

按钮组件模板resources/views/components/button.blade.php：

<button {{ $attributes->merge(['class' => 'bg-blue-500 text-white px-4 py-2']) }} @disabled($disabled)>
    {{ $text }}
</button>

调用组件：

<x-button text="提交表单" :disabled="$formInvalid" class="rounded-lg" />

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