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

假设我有一个名为

button.svelte

的可重用组件

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

<button>{text}</button>

导出let文本=未定义
{text}

现在我在另一个组件中重用这个组件，就像这样

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

从“svelte”导入{onMount}
从“/Button.svelte”导入按钮
让按钮
onMount（（）=>{
console.log（button）//如何打印button元素的html？
})

---

但是

bind的
button
：这个
似乎没有button元素的html。如何获取按钮的html元素？
要实现这一点，您必须做两件事


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


通过bonded prop访问父组件中的元素，重要的是您必须在反应语句中执行此操作
$：



纽扣，苗条

<script>
    export let node
</script> 

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


导出let节点

导入按钮组件

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

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


从“./Button.svelte”导入按钮
让按钮
$：console.log（按钮）
你好
要实现这一点，您必须做两件事


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


通过bonded prop访问父组件中的元素，重要的是您必须在反应语句中执行此操作
$：



纽扣，苗条

<script>
    export let node
</script> 

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


导出let节点

导入按钮组件

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

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


从“./Button.svelte”导入按钮
让按钮
$：console.log（按钮）
你好
您是否尝试了console.log中的innerHTML按钮？还有绑定：这不应该没有双引号？可能这会有帮助：@JulienGabriel我试过做
按钮。innerHTML
但显示
未定义的
你在console.log内的按钮上试过innerHTML吗？还有绑定：这不应该没有双引号吗？可能这会有帮助：@JulienGabriel我试过做
按钮。innerHTML
但显示
未定义的