2

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

我想构建一个树结构,并想突出显示树上任何位置的活动节点。如果我使用存储来写入/读取当前活动的节点 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在任何节点上根据需要调用该方法。

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

4

1 回答 1

0

您可以this通过eval(不要这样做)非常粗暴地访问,或者通过父组件的同谋(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>
于 2020-07-03T21:37:21.453 回答