Livewire @parentディレクティブ

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

Livewire @parentディレクティブ

Laravel Livewire の JavaScript で親のコンポーネントを取得する「@parentディレクティブ」を作成してみました。

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

@parent ディレクティブ は app/Providers/AppServiceProvider.php に定義します。

public function boot()
{
  Blade::directive('parent',fn() => "window.livewire.all().find(i => -1 != i.__instance.childIds.indexOf('{{ \$_instance->id }}'))");
}

因みに、現在の app/Providers/AppServiceProvider.php です。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
      Blade::directive('exists'     ,fn($var)   => "<?php if (isset($var) && !in_array($var,[null,false,0,'',[]],true)): ?>");
      Blade::directive('set'        ,fn($var)   => "<?php $var ?>");
      Blade::directive('unset'      ,fn($var)   => "<?php unset($var) ?>");
      Blade::directive('extract'    ,fn($var)   => "<?php extract($var) ?>");
      Blade::directive('for_extract',fn($var)   => "<?php \$__LOCALS ??= []; \$__LOCALS[\$loop->depth ?? 0] = get_defined_vars(); \$__currentLoopData = array($var)[0]; \$__env->addLoop(\$__currentLoopData); foreach(\$__currentLoopData as \$__): \$__env->incrementLoopIndices(); \$loop = \$__env->getLastLoop(); extract(\$__,isset(array($var)[1])?EXTR_PREFIX_ALL:EXTR_OVERWRITE,array($var)[1] ?? ''); ?>");
      Blade::directive('endfor_extract',fn()    => "<?php endforeach; \$__env->popLoop(); \$loop = \$__env->getLastLoop(); extract(\$__LOCALS[\$loop->depth ?? 0]); ?>");
      Blade::directive('div'        ,fn($times) => "<?php \$times = $times; if (0 == \$loop->index % $times): ?>");
      Blade::directive('div_close'  ,fn()       => "<?php if (((0 != \$loop->index) && (0 == (\$loop->index + 1) % \$times)) || \$loop->last): ?>");
      Blade::directive('enddiv'     ,fn()       => "<?php endif ?>");
      Blade::directive('checked'    ,fn($var)   => "<?php if ($var) echo 'checked' ?>");
      Blade::directive('selected'   ,fn($var)   => "<?php if ($var) echo 'selected' ?>");
      Blade::directive('last'       ,fn($var)   => "<?php if (\$loop->last) echo $var ?>");
      Blade::directive('script'     ,fn()       => "<?php \$__env->startPush('scripts') ?>");
      Blade::directive('endscript'  ,fn()       => "<?php \$__env->stopPush() ?>");
      Blade::directive('dialog'     ,fn()       => "<?php \$__env->startPush('dialogs') ?>");
      Blade::directive('enddialog'  ,fn()       => "<?php \$__env->stopPush() ?>");
      Blade::directive('parent'     ,fn()       => "window.livewire.all().find(i => -1 != i.__instance.childIds.indexOf('{{ \$_instance->id }}'))");
      Blade::directive('config'     ,fn($var)   => "<?= _config($var) ?>");
      Blade::directive('url'        ,fn($var)   => "<?= _url($var) ?>");
      Blade::directive('action'     ,fn()       => "<?= _url(\Route::currentRouteName()) ?>");
      Blade::directive('hidden'     ,fn($vars)  => "<?php foreach ([$vars] as \$var): ?><input type=\"hidden\" name=\"{{ \$var }}\" value=\"{{ \$\$var }}\"><?php endforeach ?>");
    }
}

親コンポーネントだけにイベントを送るには @parent.emitSelf を使います。@parent.emit だと全体にイベントが送られてしまいます。

  <button class="ui red mini button" onClick="@parent.emitSelf('say','hello world')">
    親にイベントを送信
  </button>

↑これは。。。ようするに emitUp ↓です（爆）。親だけに送るから少し違いますね。

  <button class="ui red mini button" wire:click="$emitUp('say','hello world')">
    親にイベントを送信
  </button>

or

  <button class="ui red mini button" onClick="@this.emitUp('say','hello world')">
    親にイベントを送信
  </button>

以上

Scroll to Top