Question

假设我有一个带有 on:click 的组件以及一个名为 name 的道具，名为 NameHandler。现在假设我想在发生 name 时更改 on:click，而不更改 NameHandler，并且不将 name 绑定到另一个变量。

就像这样：

<script>
const nameHandlerClick = (/*usually empty since I don't use event*/) => {
    component.name = randomName(); //replace component.name with a way to access name prop in NameHandler.
}
</script>

<NameHandler {name} on:click={nameHandlerClick}/>

Answer 1

我假设 NameHandler 是 forwarding the click event from the DOM，因此我们可以将 on:click 附加到它。

如果您不想将 name 存储在另一个变量中，您可以 bind 到组件并使用 client-side component API 更新 prop。

<script>
    import NameHandler from './NameHandler.svelte';
    let comp;
    
    const handleClick = () => {
        comp.$set({ name: 'updated' });
    }
</script>

<NameHandler bind:this={comp} on:click={handleClick} />

然而，这并不是一种非常 Svelte 的做事方式——客户端 API 旨在供 Svelte 组件的外部用户使用，而不是从 Svelte 组件内部使用。更惯用的方法是将 name 声明为它自己的变量并直接设置它。

<script>
    import NameHandler from './NameHandler.svelte';
    let name = 'initial';
    
    const handleClick = () => {
        name = 'updated';
    }
</script>

<NameHandler {name} bind:this={comp} on:click={handleClick} />

是否可以在 Svelte 的事件处理程序中访问组件道具？

1 个答案: