1livewire 는 controller 와 view 2가지 파일이 필요하다.
2
3php artisan make:liveiwre 컴포넌트이름
4
5view 안에 blade component 를 포함시킬 수 있다.
6
7blade component 안에 apline 를 사용할 수 있다.
8
9alpine 에서 livewire 변수와 함수를 실핼 시킬수 있다.
10
11이때..livewire view 에서 blade component 를 사용할 때 변수를 사용하면 결국..blade component 는 재사용하기 힘들어진다.
12
13그래서 blade component 에서는 apline 만을 사용하는것이 좋다.
14
15livewire View 에서 변수와 함수를 사용해서 싱크를 시켜서 사용한다.
Alpine.js 와 데이타 상호작용하는 방법
1<div>
2
3 <!-- livewire/Test/TestDropdown.php -->
4
5 <div x-data="{open : @entangle('open')}" class="p-4">
6 <div x-show="open">
7 test : {{ $name }}
8 </div>
9 </div>
10
11 <div wire:ignore x-date="{open : '{{ $open }}'}">
12 <div x-show="open">
13 test1
14 </div>
15 </div>
16
17 <div x-data="{ name : @entangle('name')}" class="p-4">
18 <input type="text" x-model="name">
19 <h1 x-text="name"></h1>
20 </div>
21
22
23 <!-- blade component -->
24 <!--
25 wire:model='open'
26 livewire 의 변수 public $open = false; 와 blade component에 attribute 로 데이타를 넘기는 방법
27
28 livewire Data Binding
29 <input wire:mode='open' type="text">
30
31 Alpine.js Datab Binding
32 <input x-model='open' type="text">
33 -->
34
35 <x-test-dropdown wire:model='open'>
36
37 <x-slot name="trigger">
38 <button>Show More...</button>
39 </x-slot>
40
41 <ul>
42 <li><button wire:click="archive">Archive</button></li>
43 <li><button wire:click="delete">Delete</button></li>
44 </ul>
45
46 </x-test-dropdown>
laravel component 에서
1
2 <!--
3 blade component 에서 Alpine.js 에서 wire:model 속성 상호작용 하는 방법
4 @entangle($attributes->wire('model'))
5 -->
6
7 <div x-data="{ open : @entangle($attributes->wire('model')) }">
8
9 <!-- alpine 을 이용하는 기본구조.. -->
10 <!-- 클릭 open, close -->
11 <span @click="open = true">{{ $trigger }}</span>
12
13 <!-- 컨텐츠 -->
14 <div x-show="open" @click.outside="open = false">
15 {{ $slot }}
16 </div>
17
18 </div>
19
20
21</div>
Alpine.js 에서 livewire 변수, 함수 실행방법
1
2 <!--
3 $wire.변수
4 $wire.함수()
5 -->
6
7 <div>
8 <div x-data="{}">
9 <h1 x-text="$wire.count"></h1>
10 <button x-on:click="$wire.increment()">Increment</button>
11 </div>
12</div>
마운트시 데이타 연결하기
1
2# Rendering
3<livewire:show-post :post="$post">
4
5# Component
6class ShowPost extends Component
7{
8 public $post;
9
10 public $title;
11 public $content;
12
13 public function mount($post)
14 {
15 $this->title = $post->title;
16 $this->content = $post->content;
17
18 return view('livewire.show-post')
19 ->layout('layouts.base')
20 ->slot('main');
21 }
22
23}
속성초기화
1class HelloWorld extens Component
2{
3 public $message;
4
5 public function mount()
6 {
7 $this->message = 'Hello World';
8
9 // 한번에 여러데이타 초기화
10 $this->fill(['message'=>'Hello World']);
11 }
12
13 // 초성초기화..별도 함수제공
14 public function resetFilters()
15 {
16 $this->reset('search');
17
18 $this->reset(['search','isActive']);
19
20 $this->resetExcept('search');
21 }
22}
데이타 바인딩
alpine 에서의 바인딩 x-model
1<div x-data={ message : ''}>
2 <input type="text" x-model='message'>
3 <span x-text="message"></span>
4</div>
livewire 에서의 바인딩 wire:model=''
1class HelloWorld extends Component
2{
3 public $message;
4}
5
6<div>
7 <input type="text" wire:model='message'>
8 <h1>{{ $message }}</h1>
9</div>
livewire Data 바인딩 딜레이
1<input type="text" wire:model="parent.message">
2<input type="text" wire:model.debounce.500ms="name">
3<input type="text" wire:model.lazy="message">
4<input type="text" wire:model.defer="query">
수정하기
1use App\Models\Post;
2
3class PostForm extends Component
4{
5 public Post $post;
6
7 protected $rules = [
8 'post.title' => 'required|string|mid:6',
9 'post.content' => 'required|string|max:500',
10 ];
11
12 public function save()
13 {
14 $this->validate();
15 $this->post->save();
16 }
17}
1<form wire.submit.prevent="save">
2 <input type="text" wire:model="post.title">
3 <textarea name="" id="" cols="30" rows="10" wire:model='post.content'></textarea>
4 <button type="submit">Save</button>
5</form>
매직액션 키워드
1$reflesh // 다시 랜더링
2
3$set('property', value) // Shortcut to update the value of perperty
4
5$toggle('property') // Shortcut to toggle boolean perperties on off
6
7$emit('event',...params)
8
9$event // wire:change='setSomeProperty($event.target.value)'
이벤트 발생시키기
1// 1. Blade Template 에서 발생시키기
2<button wire:click="$emit('postAdded')"></button>
3
4// 2. Component 에서 발생시키기
5$this->emit('postAdd');
6
7// 3. Javascript 에서 발생시키기
8<script>
9 Livewire.emit('postAdd');
10</script>
이벤트 리스너 : Component, Javascript
1// Component 에서 이벤트 등록하기
2protected $listeners = ['postAdd'=>'incrementPostCount'];
3
4public function incrementPostCount()
5{
6 $this->postcount = Post::count();
7}
8
9// Javascript에서 이벤트 등록하기
10<script>
11 Livewire.on('postAdded', postId => {
12 alert('A post was added with the id of:' + postId);
13 })
14</script>
Alpine 에서 Livewire 함수 실행시키기
1<div>
2 <button x-data="{}" x-on:click="window.livewire.emitTo('test.contact-modal', 'show')">Show contact
3 modal</button>
4</div>
5
6
7# app/Http/Livewire/Test/ContactModal
8
9namespace App\Http\Livewire\Test;
10
11use Livewire\Component;
12
13class ContactModal extends Component
14{
15 public $show = false;
16 public $isOpen = false;
17
18 protected $listeners = [
19 'show' => 'show'
20 ];
21
22 public function show()
23 {
24 $this->show = true;
25 }
26
27 public function render()
28 {
29 return view('livewire.test.contact-modal');
30 }
31}