Livewire组件中能否将ColumnChartModel传递至视图？

问题原因 #

你遇到的问题是因为Livewire会对render方法传递的视图数据做序列化处理，而ColumnChartModel这类复杂对象无法被正确序列化，导致视图中接收的值为null；同时由于它不支持被声明为public组件属性，常规的属性传递方式不可行。

可行解决方案 #

方案1：视图中直接调用组件方法生成模型 #

把生成图表模型的逻辑抽成组件内的私有方法，在视图里直接调用该方法获取实例：

组件类代码：

private function getColumnChartModel(): ColumnChartModel
{
    return (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->addColumn('Food', 100, '#f6ad55')
        ->addColumn('Shopping', 200, '#fc8181')
        ->addColumn('Travel', 300, '#90cdf4');
}

public function render()
{
    return view('livewire.report-daily-calls-by-hour');
}

视图代码：

{!! $this->getColumnChartModel()->render() !!}

方案2：利用组件生命周期方法生成私有属性 #

通过mount和hydrate方法在组件初始化/每次请求时重新生成私有属性，避开序列化问题：

组件类代码：

private $columnChartModel;

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

public function hydrate()
{
    $this->generateColumnChartModel();
}

private function generateColumnChartModel()
{
    $this->columnChartModel = (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->addColumn('Food', 100, '#f6ad55')
        ->addColumn('Shopping', 200, '#fc8181')
        ->addColumn('Travel', 300, '#90cdf4');
}

public function render()
{
    return view('livewire.report-daily-calls-by-hour', [
        'columnChartModel' => $this->columnChartModel
    ]);
}

视图中即可正常使用$columnChartModel变量。

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