livewire 와 alpine 바인딩 비교

1// livewire
2<h1>{{ $message }}</h1>
3<input type="text" wire:model='message'>
4 
5// alpine
6<div x-data="{message:''}">
7    <h1 x-text="message"></h1>
8    <input type="text" x-model="message">
9</div>

alping.js 에서 model binding

1<div x-data="{ message:'메시지 입니다.' }">
2    <h2 x-text="message"></h2>
3    <input type="text" x-model="message">
4</div>

livewire 에서 model binding view 파일

 1namespace App\Http\Livewire\Test;
 2 
 3use Livewire\Component;
 4 
 5class Input extends Component
 6{
 7    public $message;
 8 
 9    public function render()
10    {
11        return view('livewire.test.input');
12    }
13}

# Livewire Component 추가하기

1<livewire:test.input message="메시지 입니다." />

# livewire View에서 property 출력

1<h2>{{ $message }}</h2>

# livewire model binding

1<input type="text" wire:model="message"><br>

# laravel component 추가시 속성설정

1<x-test.input wire:model.defer="message" wire:loading.class="opacity-25" />

# laravel component 에서

 1<input type="text" {{ $attributes }} />
 2 
 3<input type="text" {{ $attributes->wire('model') }}>
 4 
 5<input type="text" wire:model='message'>
 6 
 7<div class="border p-4">
 8 
 9    <h4>{{ $attributes }}</h4>
10    <h4>{{ $attributes->wire('model')->value()}}</h4>
11    <h4>{{ $attributes->wire('model')->modifiers()}}</h4>
12    <h4>{{ $attributes->wire('model')->hasModifier('defer') }}</h4>
13 
14    <h4>{{ $attributes->wire('loading')->value()}}</h4>
15    <h4>{{ $attributes->wire('loading')->hasModifier('class') }}
16    </h4>
17 
18</div>

$attributes : wire:model.defer="message" wire:loading.class="opacity-25"

$attributes->wire('model')->value() : message

$attributes->wire('model')->modifiers() : ["defer"]

$attributes->wire('model')->hasModifier('defer') : 1

$attributes->wire('loading')->value() : opacity-25

$attributes->wire('loading')->hasModifier('class') : 1

livewire 와 laravel component 와 alpine.js 에서 모두 바인딩 시키기

 1use Livewire\Component;
 2 
 3class Dropdown extends Component
 4{
 5    public $show = false;
 6 
 7    public function toggle()
 8    {
 9        $this->show = !$this->show;
10    }
11    public function render()
12    {
13        return view('livewire.test.dropdown');
14    }
15}

 1<div>
 2    <x-test.dropdown wire:model="show">
 3        <x-slot name="trigger">
 4            <button>Show</button>
 5        </x-slot>
 6        test
 7    </x-test.dropdown>
 8 
 9    <button wire:click='toggle'>Show</button>
10</div>

1<div x-data="{open : @entangle($attributes->wire('model'))}">
2    <div @click="open = true">
3        {{ $trigger }}
4    </div>
5 
6    <div x-show="open" @click.outside="open = false">
7        {{ $slot }}
8    </div>
9</div>