Laravel 11 + Livewire 3：组件向布局传递公共变量$navActive失败求助

问题场景 #

开发环境为Laravel 11搭配Livewire 3，需将组件的公共变量$navActive传递到布局文件，但常规视图传参方式报错，尝试{{ $slot }}和#[Layout('layouts.app')]均无法实现变量传递。

解决方案 #

方法1：通过extends()方法传递变量 #

在组件的render()方法中，调用extends()时传入包含组件变量的数组：

public $navActive = 'profesionales';

public function render()
{
    return view('livewire.profesionales.profesionales-component')
        ->extends('layouts.app', ['navActive' => $this->navActive]);
}

此时布局文件中的{{ $navActive }}即可正常读取组件传递的值。

方法2：使用Livewire的@aware指令（推荐） #

无需修改组件的render()方法，直接在布局文件中用@aware声明要接收的变量：

@aware(['navActive' => 'default-value'])

注：default-value为可选默认值，当组件未提供该变量时会启用此值

之后布局里就能直接使用{{ $navActive }}，Livewire会自动感知组件的公共属性并传递。

结合#[Layout]注解的用法 #

如果使用#[Layout]注解定义布局，同样可以配合@aware指令，无需额外传参：

#[Layout('layouts.app')]
public $navActive = 'profesionales';

public function render()
{
    return view('livewire.profesionales.profesionales-component');
}

关键说明 #

• 组件中的变量必须是公共属性（public），否则Livewire无法传递该变量到布局。
• 两种方法都能解决变量传递问题，@aware更符合Livewire的组件化设计，推荐使用。

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