如何在 Alpinejs 中使用 x-init 调度参数

Question

我的 Alpinejs 组件代码在 EventListener 中，我希望使用魔法 $dispatch 从组件外部传递标题字符串。我只能使用 onclick 事件来实现这一点，但确实需要在页面加载时执行此操作。

这是组件外部的代码，用于使用@click 传递标题。这可行，但需要在页面加载时设置（在 Alpinejs 中我相信这是 x-init）

<div x-data>
  <button 
    @click="$dispatch('myparams', { title: 'The title' })"
    type="button" 
  >
    More info
  </button>
</div>

使用 x-init 不适用于以下内容

<div 
  x-data 
  x-init="() => $dispatch('myparams', {'title': 'Initialised'})"
// x-init="$dispatch('myparams', {'title': 'Initialised'})"
>
</div>

这是我尝试从外部接收数据的组件

<section 
  x-data="mypage"
  @myparams.window="title = $event.detail.title"
>
  <h2 x-text="title"></h2>
</section>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('mypage', () => ({
      title: '',
      init() {
        @myparams.window="title = $event.detail.title"
        console.log('I will get evaluated when initializing this component.')
      },
    }))
})
</script>

Answer 1

这种行为的原因是您在初始化myparams 事件的侦听器之前调度了myparams 事件。所以第一次没人听。

面向未来的解决方案是使用$nextTick，以便在 DOM 更新后触发调度。

<div x-data="initMyparams"></div>

<section x-data="mypage" @myparams.window="title = $event.detail.title">
  <h2 x-text="title"></h2>
</section>

我们有一个使用$nextTick 的新initMyparams 组件：

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('mypage', () => ({
        title: '',
        init() {
            console.log('I will get evaluated when initializing this component.')
        },
    })),

    Alpine.data('initMyparams', () => ({
        init() {
            this.$nextTick(() => this.$dispatch('myparams', { title: 'Initialised' }))
        },
    }))
})
</script>

Answer 2

设法弄明白了。基本上我需要做的就是在 onload (x-init) 事件之前在页面上包含组件。