为什么AppHeader组件的方法在发出时没有被触发

在Laravel 8，livewire2中，我制作了一个标头组件，并在中调用resources/views/layouts/frontpage.blade.hp:

</head>
<body class="flex flex-col min-h-screen">
<header>
@livewire('app-header', ['layout'=>'frontend'])
</header>
<main class="frontend_page_container_wrapper z-20 ">
{{ $slot }}
</main>
<footer class="bg-green" style="height: 138px !important;">
@livewire('frontend-footer')
</footer>
@stack('modals')
@livewireScripts
</body>
</html>

当在任何组件中打开新页面时，为了更新标题中的当前信息，我调用AppHeader组件的事件。像应用程序中的/Http/Livewire/Hostel/HostelsHomepageSpotlight.php：

<?php
namespace AppHttpLivewireHostel;
...
use LivewireComponent;
class HostelsHomepageSpotlight extends Component
{

...
public function render()
{
return view('livewire.hostel.hostels-homepage-spotlight', [
])->layout('layouts.frontpage');
} // public function render()

public function mount()
{

$this->hostelsDataRows = Hostel
::getByStatus('A')
...
->paginate($hostels_per_page);
...

Log::info(  varDump(-1, ' -1 HostelsHomepageSpotlight before setCurrentPageProperties::') );
//        $this->emitUp('setCurrentPageProperties', [  // IF TO UNCOMMENT THIS LINE - IT DOES NOT WORK
$this->emitTo('AppHeaderAppHeader','setCurrentPageProperties', [
'layout'                => "frontend",
'icon'                  => 'hostel',
'additive_class'        => '',
'title'                 => 'Spotlight hostels',
'trigger_js_event'      => true,
'template_container_id' => "hostels_homepage_spotlight_page_container"
]);

} // public function mount()
...

和应用程序内/Http/Livewire/AppHeader.php：

<?php
namespace AppHttpLivewire;
use LivewireComponent;
class AppHeader extends Component
{
...
protected $listeners = ['setCurrentPageProperties' => 'setCurrentPagePropertiesCallback'];
public function render()
{    
return view('livewire.app-header',  [])
->layout('layouts.') ;//. $this->layout;
}

public function mount(
...
) {
...
}


public function setCurrentPagePropertiesCallback($data)
{
Log::info(varDump($data, 'INSIDE  -1  setCurrentPagePropertiesCallback $data::'));
if ( ! empty($data['layout'])) {
$this->layout = $data['layout'];
}
...
} // public function setCurrentPagePropertiesCallback($data)

}

当我用HostelsHomepageSpotlight.php组件打开页面时我看到自动条码读取器

-1 HostelsHomepageSpotlight before setCurrentPageProperties

但不是

INSIDE  -1  setCurrentPagePropertiesCallback

因为没有触发HostelsHomepageSpotlight.php的setCurrentPageProperties回调方法。

如何修复？

修改块：

我在目标组件的名称中拼写错误。它是"AppHeader"，因此修复：

$this->emitTo('AppHeader','setCurrentPageProperties', [

此事件不会在app/Http/Livewire/AppHeader.php中触发，声明为：

class AppHeader extends Component
{  
...
protected $listeners = ['setCurrentPageProperties' => 'setCurrentPagePropertiesCallback'];
...
public function setCurrentPagePropertiesCallback($data)
{
Log::info(varDump($data, 'INSIDE  -1  setCurrentPagePropertiesCallback $data::'));
...
}
}

我也试过：

$this->emit('setCurrentPageProperties', [

但它无论如何都不起作用。。。

在AppHeader Component resources/views/livewire/app-header.blade.php中，我添加了AppHeader组件的调用方法为：

<a  wire:click="appHeaderClickTest"  class=" block text-sm px-2 py-4 hover:bg-green-500 transition duration-300 ">
Test2
</a>

在app/Http/Livewire/AppHeader.php中定义：

public function appHeaderClickTest() {
Log::info(  varDump(-12, ' -12 appHeaderClickTest::') );
}

并点击"；测试2"；按钮我在日志文件中看到消息。所以我检查我是否放入了有效的AppHeader组件，当我点击"；测试2"；按钮

修改区块#2：我创建了新的livewire应用程序EventsTest

包含4个组件：

php artisan make:livewire Home
php artisan make:livewire hostel/HostelsHomepageSpotlight
php artisan make:livewire AppHeader
php artisan make:livewire hostel/HostelViewPage

我把HostelsHomepageSpotlight放在了主页上。在我的应用程序中，只有2个链接和位于resources/views/layouts/app.blade.php标题的AppHeader我发出事件setCurrentPageProperties，但它在AppHeader中没有触发(我有默认标题，没有日志行)

我上传到https://github.com/sergeynilov/EventsTest你能看一下吗？

修改区块#3：

它工作(我看到有效的标题文本)与设置

来自HostelsHomepageSpotlight模板的根div，但与mount()方法HostelsHomepageSpotlight我从数据库中读取所有数据，我在HostelsHomepageSpotlight页面上显示我在我的页面上看到闪烁的数据，然后所有数据都消失了。它看起来像：

1. mount()方法读取HostelsHomepageSpotlight的my上的所有数据
  page 2)从模板调用emitHeaderToComponent 3)方法运行组件内部的emitHeaderToComponent，并从头组件中的头组件4)发射
  setCurrentPageProperties标题已分配，我在应用程序的标题中看到它

但在2-4个步骤中的一个步骤中，我在步骤1读取的数据被清除。。。为什么以及如何修复？

修改区块#4：

在组件HostelsHomepageSpotlight.php中，我声明了数组并将其填充到装载方法中：

<?php
namespace AppHttpLivewireHostel;
use LivewireComponent;
class HostelsHomepageSpotlight extends Component
{
private $hostelsDataRows = [];
public function render()
{
Log::info('-1 HostelsHomepageSpotlight ::' . print_r(-1, true));

return view('livewire.hostel.hostels-homepage-spotlight', [
'hostelsDataRows' => $this->hostelsDataRows,
]);
}
public function mount()
{
Log::info('-1 HostelsHomepageSpotlight MOUNT -99::' . print_r(-99, true));
$this->hostelsDataRows = [
['id' => 1, 'label 1'],
['id' => 2, 'label 2'],
];
}

public function emitHeaderToComponent()
{
/*        $this->hostelsDataRows = [
['id' => 5, 'label 5'],
['id' => 6, 'label 6'],
];*/
$this->emit('setCurrentPageProperties', [
'title' => 'Cal from ' . __CLASS__,
]);
}
}

并在resources/views/livewire/hosters/hostels-homepage-spotlight.blade.php中显示hostelsDataRows的内容我看到屏幕上的数据在闪烁和分解。

我看起来像是在装载后触发的emitHeaderToComponent，并清除所有变量的内容——它们是如何声明的在组件中。

如果取消注释emitHeaderToComponent中hostelsDataRows的填充，则这些数据在屏幕上可见。我认为这可能是问题的决定(加载连线中的所有组件数据：init=")，但不确定是这是个好决定吗？如果文档中描述了这种行为/功能？

谢谢！

当整个页面刷新时，您将失去状态。所以这就是事件和侦听器不工作的原因

因此，正如我所建议的，您可以使用wire:init作为变通方法。

将以下方法添加到HostelsHomepageSpotlight和HostelViewPage组件中。

public function emitHeaderToComponent()
{
$this->emit('setCurrentPageProperties', [
'title' => 'Cal from ' . __CLASS__,
]);
}

现在打开相应组件hostels-homepage-spotlight和hostel-view-page的视图，并添加以下

<div wire:init="emitHeaderToComponent">
Your  componenet based other stuff
</div>

现在尝试单击链接。

我会做一个分叉回购，做出改变，并为你提供一个链接，这样就会更清晰

此处提交PR

相关内容

最新更新

热门标签：