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

【问题标题】：How to get html element of Svelte component using bind:this?如何使用 bind:this 获取 Svelte 组件的 html 元素？
【发布时间】：2021-07-23 20:01:56
【问题描述】：

假设我有一个名为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>

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

【问题讨论】：

你在console.log里面的按钮上试过innerHTML吗？还要绑定：这不应该没有双引号吗？
这可能会有所帮助：https://stackoverflow.com/questions/59889859/how-can-i-return-the-rendered-html-of-a-svelte-component
@JulienGabriel 我试过做button.innerHTML，但显示undefined

标签： javascript html svelte svelte-3

【解决方案1】：

要做到这一点，你必须做两件事

使用bind:this={prop}将元素绑定到道具。
通过bonded prop访问父组件中的元素，重要的是您必须在响应式语句$:中执行此操作。

Button.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>

【讨论】：