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

gk7wooem 于 2022-11-26 发布在其他

关注(0)|答案(1)|浏览(142)

我为我的可重用input组件做了一个草案实现。下面的代码显然抛出了一个错误。
问题是如何将$event传递回registerblade以获取或记录输入的值？

注册.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) }}">

laravel

来源：https://stackoverflow.com/questions/74557287/how-to-pass-callback-function-in-component-laravel-alpine-js

1条答案

按热度按时间

gtlvzcf81#

这里有一些东西。
首先，你的标记是错误的。你在结束div的错误结尾有一个结束斜杠。应该是</div>而不是<div/>。
那么您使用的是没有x-data的x-on，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 }}>

赞(0）回复(0）举报 2022-11-26

我来回答

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

1条答案

相关问题

热门标签

最新问答