如何在组件中传递回调函数？ (laravel alpine.js)答案

【问题标题】：how to pass callback function in component? (laravel alpine.js)如何在组件中传递回调函数？ (laravel alpine.js)
【发布时间】：2022-11-25 04:30:31
【问题描述】：

我为我的可重用项目制定了一个实施草案输入零件。下面的代码显然会引发错误。

问题是如何将 $event 传回登记刀片获取或记录输入的值？

注册.blade.php

<div>
    <x-input onChange="(value) => {console.log('value', value)}"></x-input>
<div/>

输入.blade.php

@props(['onChange' => 'null'])

<input x-on:change="{{ $onChange($event) }}">

【问题讨论】：

为什么不直接在组件内部执行此操作而不是传递它呢？你使用不需要 onchange 的组件吗？
@xenooooo 它是一个可重用的组件。除注册页面外，其他页面将使用它。
你试过做类似<x-input @change="your event here"/>的事情吗
@xenooooo 我试过了，但结果相同。

标签： laravel alpine.js

【解决方案1】：

这里有几件事。

首先，您的标记是错误的。您在结束 div 的错误末端有一个结束斜线。应该是</div>而不是<div/>。

那么你使用的是x-on而不是x-data。 Alpine 只拾取具有 x-data 属性的组件。

最后，事件会自动传播，因此您可以只监听父级：

{{-- register.blade.php --}}
<div x-data>
    <x-input x-on:change="console.log('value', $event.target.value)" />
</div>

{{-- input.blade.php --}}
<input {{ $attributes }}>

【讨论】：