如何使用 bind:this 获取 Svelte 组件的 html 元素?
How to get html element of Svelte component using bind:this?
假设我有一个名为 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 元素?
要做到这一点,你必须做两件事
使用 bind:this={prop}
.
将元素绑定到 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>
假设我有一个名为 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 元素?
要做到这一点,你必须做两件事
使用
将元素绑定到 propbind: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>