如何在Svelte组件内部获取当前组件自身的实例引用

方案1：使用内部API直接获取（无需父组件适配） #

Svelte v3、v4版本均提供了get_current_component内部方法，可直接在组件同步初始化阶段获取当前组件实例：

<script>
import { get_current_component } from 'svelte/internal'
let input
// 必须在组件脚本同步执行阶段调用，不能放在异步回调、事件函数内
const myself = get_current_component()

export function focus() {
    input.focus()
}

// 获取到实例后可直接传递给外部JS库使用
// externalLib.registerComponent(myself)
</script>

<input bind:this={input} />

方案2：使用公开API手动同步（兼容性更稳定） #

如果不想依赖内部API，可以通过双向绑定的方式让父组件把实例同步回组件内部：

1. 子组件InputField.svelte代码：

<script>
let input
// 声明可导出的实例接收变量
export let instance

export function focus() {
    input.focus()
}

// 实例完成绑定后触发后续逻辑
$: if (instance) {
    // 此处instance就是当前组件的实例
    // externalLib.registerComponent(instance)
}
</script>

<input bind:this={input} />

2. 父组件App.svelte调整绑定逻辑：

<script>
import InputField from './InputField.svelte'
let field
</script>

<!-- 同时绑定this和instance属性，把实例同步回子组件 -->
<InputField bind:this={field} bind:instance={field} />
<button on:click={() => field.focus()}>Focus field</button>

注意事项 #

• 方案1优势是实现简单，无需父组件配合，缺点是属于内部API，未来Svelte大版本更新可能出现变动
• 方案2优势是完全使用公开API，版本兼容性强，缺点是需要父组件做适配调整

内容的提问来源于stack exchange，提问作者artfulrobot