嵌套组件

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

嵌套组件

Livewire 支持嵌套组件。 组件嵌套可以是一种非常强大的技术,但是有一些陷阱需要注意:

  1. 嵌套组件可以接受其父级的数据参数,但是它们不像Vue组件的props那样灵活。
  2. 请勿使用 Livewire 组件将 Blade 片段提取到单独的文件中。 对于这些情况,最好使用 Blade 包含或组件。

这是从另一个Livewire组件的视图中称为 add-user-note 的嵌套组件的示例。

UserDashboard.php

use Livewire\Component;

class UserDashboard extends Component
{
    public $user;

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

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

user-dashboard.blade.php

<div>
    <h2>User Details:</h2>
    Name: {{ $user->name }}
    Email: {{ $user->email }}

    <h2>User Notes:</h2>
    <div>
        @livewire('add-user-note', ['user' => $user])
    </div>
</div>

循环跟踪组件

与VueJ相似,如果在循环中渲染组件,Livewire 无法跟踪哪个组件。 为了解决这个问题,livewire 提供了一种特殊的“键”语法:

show-users.blade.php

<div>
    @foreach ($users as $user)
        @livewire('user-profile', ['user' => $user], key($user->id))
    @endforeach
</div>

如果您使用的是Laravel 7或更高版本,则可以使用标记语法。

show-users.blade.php

<div>
    @foreach ($users as $user)
        <livewire:user-profile :user="$user" :key="$user->id">
    @endforeach
</div>

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~