对 Svelte 中"this"组件的引用

Question

从我所读到的内容来看，目前这似乎是不可能的：https://github.com/sveltejs/svelte/pull/4523#issuecomment-596232030

我想构建一个树结构，并希望突出显示树上任何位置的活动节点。如果我使用存储来写入/读取当前活动的节点 ID，这很容易，只需检查 ID 是否与组件的 ID 匹配即可。

但是，如果我有数千个节点，恐怕这可能会变得非常慢，因为每个节点都会检查当前ID何时更改。

所以我想我可以改为存储对当前活动节点的引用，以便我可以轻松地停用/激活任何节点。例如：

import { activeNode } from './stores'
let active = false
export function activate() {
$activeNode.deactivate()
activeNode.set(this) // <- this is undefined
active = true
}
export function deactivate() {
active = false
}

我相信这样的事情会快得多，因为我可以在任何节点上根据需要调用activate方法。

那么如何引用组件实例呢？还是有更好的方法？

Answer 1

你可以非常黑客地使用eval访问this(不要这样做(，或者非常黑客地访问父组件的同谋(bind:this(......但你不需要。

暴露外部世界需要的东西呢？

<script>
import { activeNode } from './stores.js'
let active = false
const api = {
activate() {
if ($activeNode) $activeNode.deactivate()
$activeNode = api // sugar for: activeNode.set(api)
active = true
},
deactivate() {
active = false
}
}
</script>
<div class:active>
Node
</div>
<style>
.active {
font-weight: bold;
}
</style>