如何使用bind:this获取Svelte组件的html元素？

Question

假设我有一个名为 的可重用组件button.svelte，

<script>
export let text = undefined
</script>

<button>{text}</button>

现在我在另一个组件中重用这个组件，如下所示，

<script>
import { onMount } from "svelte"
import Button from "./Button.svelte"

let button

onMount(() => {
    console.log(button) // How do I print the html of the button element?
})
</script>

<Button text="Button" bind:this="{button}"></Button>

但buttonofbind:this似乎没有按钮元素的 html。如何获取按钮的 html 元素？

Answer 1

为了实现这一目标，你必须做两件事

• 使用将元素绑定到 prop bind:this={prop}。

• 通过 bond 属性访问父组件中的元素，重要的是您必须在响应式语句中执行此操作$:。

按钮.svelte

<script>
    export let node
</script> 

<button bind:this={node}>
  <slot />
</button>

导入按钮组件

<script>
    import Button from './Button.svelte'
    let button
    
    $:console.log(button)
</script>

<Button bind:node={button}>
    Hello
</Button>