Livewire コンポーネントの作成について

/ Livewire / By
ショコラ
ショコラ

Livewire コンポーネントの作成について

PHP側 でもコンポーネントを作成することに成功しました。

もっさん先輩
もっさん先輩

Livewire v1 のブレードでの書き方。

@livewire('counter',['count'=>'100'])

Livewire v2 のブレードでの書き方。↓ここまでが通常の書き方です。

<livewire:counter :count="100">

view を使ってライブワイヤータグから動的に生成する方法。
この後、エレメントをDOMに追加して livewire.rescan() を実行する必要があります。

function render_blade(string $blade)
{
  $tmpl = uniqid();
  $file = resource_path('views/dynamic/'.$tmpl.'.blade.php');
  try {
    file_put_contents($file,$blade);
    return view('dynamic.'.$tmpl)->render();
  }
  finally {
    unlink($file);
  }
}

render_blade("<livewire:counter :count=\"100\"/>");

こちらについては、LiveRelation に mountLivewireTagメソッド を追加しました。

public function mountLivewireTag(string $blade,$target='body') {
  $this->emit('createComponent',render_blade($blade),$target);
}

↑上は view を使いコンポーネントを作成しましたが、↓下は mountメソッド で HTML を生成することができました。

\Livewire\Livewire::mount('counter',['count'=>'100'])->html()

こちらについては、LiveRelation に mountComponentメソッド を追加しました。

public function mountComponent(string $name,$params,$target='body') {
  $this->emit('createComponent',\Livewire\Livewire::mount($name,$params)->html(),$target);
}

↓こちらが最後。LifecyleManager を使ってコンポーネントを作成する方法。これがやりたかったです。

public function createComponent(string $name,array $params) {
  $id = str()->random(20);
  return LifecycleManager::fromInitialRequest($name,$id)
    ->boot()
    ->initialHydrate()
    ->mount($params)
    ->instance;
}

public function renderComponent(Component $component,string $target='body') {
  $response = LifecycleManager::fromInitialInstance($component)
    ->renderToView()
    ->initialDehydrate()
    ->toInitialResponse();
  $this->emit('createComponent',$response->html(),$target);
}

LiveRelation に createComponentメソッド と renderComponentメソッド を追加しました。
createComponent を使えば、mount後のインスタンスを取得できるので、コンポーネントのプロパティを設定したり、何かメソッドを呼び出してからレンダリングさせることができます。

$component = static::createComponent('counter');
$component->count = 100;
$component->indrecnt();
$this->renderComponent($component);

以上

Scroll to Top