要渲染 Livewire 元件也非常简单，主要会分成两种常用的方法，以下会分别对照 官方文件 来做示范。
作为页面中的元件引入使用，可以当作输入表单、图片上传、按钮或是任何想要存入资料库的同时但又不需要将页面重新整理的功能。引入的方式可以像 Vue.js 的 Component 或是传统 Laravel 的 @ 用法，就照你的习惯挑一种就好，用起来都是一样的。
<livewire> tag<div>
<livewire:show-posts />
</div>
@livewire@livewire('show-posts')
这边其实就跟 Vue.js 传值给子元件的方法一样。
<livewire:show-post :post="$post">
//
@livewire('show-post', ['post' => $post])
之後在 app/Http/Livewire/ShowPost.php 中就可以宣告一个同名的变数来接这个值
class ShowPost extends Component
{
public $post;
...
}
如果想要让整个页面几乎都是 Livewire 那就可以用这个方法。这个方法跟 Vue 平常会用的嵌套路由一样，也跟 Laravel 原先的 @yield 用法一样。让最外层的 Layout 固定像是上方的 Navbar 或是底下的 Footer 等等，并透过路由来切换主要的内容页面。
首先都要先将元件引入在 Route 中，与原本的 Controller 一样。
# routes/web.php
...
use App\Http\Livewire\ShowPosts;
...
Route::get('/post', ShowPosts::class);
注意：有些专案会在 app\Providers\RouteServiceProvider.php 中启用 namespace，目的是在 Route 中呼叫 Controller 时都可以少打前面的 App\Http\Controller，但这样会造成你在引入 Livewire 时导致路径会出错。而如果将 namespace 改成 App\Http 则会导致内建的 Auth::route() 发生错误，所以这边建议是不要启用它。
接着在 Layout 或是任一当作最外层的页面加上 {{ $slot }}，预设都用 $slot 但当然也是可以手动去改这个变数的名称，但後面渲染时也要自己再改就是了。
<head>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
等同 Vue.js 的
<router-view></router-view>
接着在 app\http\Livewire\ShowPosts.php 中选择要使用的 layout
class ShowPosts extends Component
{
...
public function render()
{
return view('livewire.show-posts')
->layout('layouts.base');
}
}
如果你的 $slot 有自己改名字的话，那就要再加一行来跟它说叫什麽名字。
public function render()
{
return view('livewire.show-posts')
->layout('layouts.base')
->slot('main');
}
@yield 共用有些页面的内容可能不会需要用到 Livewire 这时候就会用回原本 Controller 或是在 Route 直接回传 view 的方法，因此 Livewire 也支援 ->extends() 的用法，而不是使用上面的 ->layout()。
public function render()
{
return view('livewire.show-posts')
->extends('layouts.app');
}
如果要使用 @section 也是可以的
public function render()
{
return view('livewire.show-posts')
->extends('layouts.app')
->section('body');
}
一些功能中，我们可能会依照ID来产生对应的页面内容，这时候就需要透过路由传递参数给页面，像是 /post/210831001。在路由中用法也跟原先传递参数给 Controller 的方式一样：
Route::get('/post/{post_id}', ShowPost::class);
之後在 Livewire 中宣告的 pubic $post_id; 就会自己拿到值罗。
class ShowPost extends Component
{
public $post_id;
}
进阶一点写法的话还可以直接帮你绑定 Model ，这边的 Post $post 是直接代替了 $post = Post::find($id);。因此後面就可以直接用 $post->id 、$post->save() 等等直接操作该笔资料的内容了！！
Route::get('/post/{post}', ShowPost::class);
class ShowPost extends Component
{
public Post $post;
}
注意：官方文件指出需要 PHP 7.4 才支援自动绑定的功能，不然还是要自己写在
mount()中，如下：
class ShowPost extends Component
{
public $post;
public function mount(Post $post)
{
$this->post = $post;
}
}
<<: [Day5]C# 鸡础观念- 让变数学会七十二变的高手~运算子
>>: [Day6]Back to High School Physics
如果今天有上万人在同一时间抢限量商品，昨天分享的方案基本撑不住。 不过面对这个情境，Redis 表示...
procedure简单来说就跟写程序一样，只是procedure是运用资料库的程序语言，透过不同语...
当您将外部硬碟或USB随身碟插入计算机时，诸如“需要格式化磁碟机中的磁片才能使用”之类的错误消息是一...
系统弱点扫描也是我开始学习资安检测的第一个关卡 不论是网路管理人员、系统工程师到资安检测人员 了解弱...
Promise JavaScript 是属於同步的程序语言，因此一次仅能做一件事情，但遇到非同步的事...