如何在Livewire中正确传递变量给子组件并在子视图中调用？

问题场景 #

父视图通过<livewire:child-view :year="2023"/>向子组件传递year变量，子组件的mount($year)方法能正确接收，但在子视图child-view.blade.php中使用{{ $year }}时提示“Undefined variable $year”。

最佳实现方式 #

方式1：声明公共属性（推荐）

这是符合Livewire设计理念的标准做法，Livewire会自动将组件的公共属性同步到视图中：

1. 在子组件控制器中声明公共属性并赋值：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ChildView extends Component
{
    // 声明公共属性
    public $year;

    public function mount($year)
    {
        // 将接收的变量赋值给公共属性
        $this->year = $year;
    }

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

2. 子视图直接访问变量：

{{ $year }}

方式2：在render方法中手动传递变量

这是你发现的可行方案，适合特殊场景下手动控制视图变量：

1. 子组件控制器中保存接收的变量，再在render时传递到视图：

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ChildView extends Component
{
    private $year;

    public function mount($year)
    {
        $this->year = $year;
    }

    public function render()
    {
        // 将变量传递到视图
        return view('livewire.child-view', [
            'year' => $this->year
        ]);
    }
}

2. 子视图同样直接使用{{ $year }}即可。

注意事项 #

• 优先使用方式1，因为公共属性支持Livewire的响应式更新，后续如果需要修改year并同步到视图，无需额外处理；
• 如果使用私有属性，必须通过render方法手动传递，否则视图无法访问。

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