javascript - 监听来自 Svelte 组件的调度事件
问题描述
我正在寻找一种方法来侦听来自 JavaScript(而不是on:
语法)的另一个组件中的 Svelte 组件的调度事件。
这是我试图在 REPL 上实现的代码。
预期的行为是在单击按钮关闭 0时在控制台中显示0 ,其他的以此类推。
解决方案
我在 svelte 的编译代码中进行了一些挖掘,我找到了一个解决方案来监听 svelte 处理的事件,但它并不漂亮:)
您可以(并且应该)在调用时调度自己的自定义事件onClose
,但解决方案如下:
在 Nested.svelte 上
<script context="module">
let counter = 0
</script>
<script>
import { createEventDispatcher, onMount } from 'svelte';
// add this
import { get_current_component } from 'svelte/internal';
let _this;
const id = counter++
const dispatch = createEventDispatcher()
/*********
and add this reactive statement
**********/
$: {
if (_this){
_this.parentNode.hosts = (_this.parentNode.hosts || []);
_this.parentNode.hosts.push(get_current_component());
}
}
/*********
end
**********/
function onClose() {
dispatch('close', id)
}
</script>
<!-- bind this -->
<button bind:this={_this} class='nested-button' on:click={onClose}>
Close {id}
</button>
然后在你的 App.svelte
<script>
import { onMount } from 'svelte'
import Nested from './Nested.svelte'
let element
onMount(() => {
// requestAnimationFrame is required!
requestAnimationFrame(() => element.hosts.forEach(nestedButton => {
nestedButton.$on('close', (e) => {
console.log(e.detail)
})
}));
})
</script>
<ul bind:this={element}>
<Nested/>
<Nested />
<Nested />
</ul>
解释 -
绑定到 svelte 事件的唯一方法是获取对调用组件的引用并调用该$on
方法,但目前没有简单的方法来获取组件的引用。
所以我所做的是调用 svelte 的 internal get_current_component
,它将返回当前组件(但由于某种原因在 inside 调用时不起作用onMount
)。
我附加了对parentNode.hosts
组件中最顶层元素的引用,在本例中是ul
元素。
然后你可以$on
为每个引用调用方法element.hosts
。
然而,适当的解决方案将像这样调度您自己的事件:
function onClose() {
dispatch('close', id)
this.dispatchEvent(new CustomEvent('close', {detail: id}));
}
并且通过实现几乎完全相同的事情而不会弄乱svelte的内部结构
推荐阅读
- symfony - Symfony - 实体 - manyToOne orderBy
- php - Joomla 网站中的重复 URL(双 URL)
- python - Left join 和 ValueError:错误的项目数通过 55,位置暗示 1
- php - Web Push php 库:引发内部错误
- laravel - 我的订单表中有一个购物车对象需要显示商品
- android - 安卓。无法实例化 Worker
- javascript - 如何在单页应用程序的某些页面中禁用后退按钮
- php - Laravel Migrate 无法连接到 MYSQL
- c++ - 指针变量在 cout 函数中不起作用
- python - 在 UpdateView 上获取删除按钮以重定向时出现问题