今天的內容是頁面前後端資料傳遞，這個部分跟前面相比來說簡單許多也比較直覺話。如果以前有寫過 Vue.js 的朋友應該會對這個方式非常熟悉，但又稍微的一點點不一樣，那就來看看今天的內容吧！

今天一樣用官方文件的範例來做介紹，不過官方文件在變數的命名會跟保留字有點像，這邊我會稍作改變避免誤解。

基礎介紹

假設我們要在頁面上印出「Hello World!」這幾個字，那我們先宣告一個變數叫做 $title 並給他預設的值 Hello World!，到這邊後端的部分就完成啦！

class Day5 extends Component
{
    public $title = 'Hello World!';
    ...

前端的畫面就直接使用 {{ $title }}來印出剛剛後端 $title 的內容，跟以往在 Controller 上把資料渲染到前端一樣。同樣的也和 Vue 把變數印出來的方式也一模一樣。

<div>
    <h2>{{ $title }}</h2>
    <!-- Will output "Hello World!" -->
</div>

根據官方文件請注意以下三點：

1. 變數命名要避開 Livewire 的保留字：$rules、$messages
2. 變數在前端透過 JavaScript 都看得到，因此避免放入密碼、個資等敏感資料。
3. 變數型態只能是 JS 支援的型態：（string、int、array、boolean）或是以下 PHP 的型態：Stringable、Collection、DateTime、Model、EloquentCollection。

注意：宣告時的protected 、private 屬性不會被 Livewire 更新，所以避免使用它們來儲存會被更新的資料。

Mount()

可以透過 mount() 來初始化內容，像是上面的「Hello World!」不一定要宣告變數時就給他值，也可以到 mount() 時再給值就可以了。差別是在某些功能下可能要先拿取其他資料做完判斷再決定要給的值，像是：先拉取 User 的資料表判斷這個人的身份，如果是管理員就顯示「至高無上的管理員，歡迎回來」，如果是一般使用者就顯示「你好，使用者」。因為沒辦法在宣告變數時就做這些複雜操作，所以這時候就要寫在 mount() 啦！！

class Day5 extends Component
{
    public $title;
    public $subtitle;
    public $user = array(
        'role' => '管理員'
    );
 
    public function mount()
    {
        if ($this->user['role'] === '管理員')
        {
            $this->subtitle = '至高無上的管理員，歡迎回來';
        } else {
            $this->subtitle = '你好，使用者';
        }
    }
}

注意：Livewire 的運作不是一定要有 mount() 才能運作，使不使用取決於功能有沒有需要用到。

$this->fill()

假設你有大量的資料要塞，一個一個打很麻煩，這時候就可以用 $this->fill() 以 PHP 陣列的方式一次來塞大量的值：

注意：陣列內要填入的變數是 'title' 而不是 $title

public function mount()
{
    $this->fill([
        'title' => '你好，世界',
        'subtitle' => '今天天氣真好',
    ]);
}

$this->reset()

如果有值想要回到預設的狀態，那就可以使用 $this->reset() ，也可以用陣列的方式一次對很多個變數使用：

注意：這邊是回到宣告變數時的值，並不是回到 mount() 後的值。

    $this->reset('title');

    // 或是一次 reset 多個變數

    $this->reset([
        'title',
        'subtitle'
    ]);

範例

從 Day5 開始就會提供該篇文章的範例，自己做做看的話更能快速掌握技巧。

GitHub 網址在這邊

運行之後打開 http://127.0.0.1:8000/day5 就能看到今天的範例啦

檔案的話分別在：
app\Http\Livewire\Example\Day5.php
resources\views\livewire\example\day5.balde.php