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

Question

假设我有一个带有 on:click 的组件以及一个名为 name 的道具 NameHandler。现在假设我想在 on:click 发生时更改 name，而不更改 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 to the component and update the prop using the client-side component API。

<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 的事件处理程序中访问组件属性？

Is it possible to access component props in an event handler in Svelte?

events

svelte

svelte-3