我的 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>
uj5u.com熱心網友回復：
設法弄清楚了。基本上我需要做的就是在 onl oad (x-init) 事件之前在頁面上包含組件。
uj5u.com熱心網友回復：
這種行為的原因是您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>
我們有一個新initMyparams組件使用$nextTick：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/409773.html
標籤：