如何在Svelte客户端组件API中绑定属性？

Svelte官方的客户端组件API文档里确实没明确说明怎么给通过API挂载的组件实现属性双向绑定，但我们可以通过组件事件监听+手动同步变量的方式来实现，具体方法如下：

1. 让子组件触发更新事件 #

首先在你的comp.svelte里，当bindme属性变化时，向外触发一个自定义事件，把最新的值传出去：

<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

export let bindme;

// 当bindme变化时，触发事件通知外部
$: dispatch('bindme-update', bindme);
</script>

<!-- 这里用input演示双向绑定的场景 -->
<input type="number" bind:value={bindme} />

2. 挂载组件并实现双向同步 #

根据使用环境的不同，有两种实现方式：

场景一：在Svelte组件内部使用客户端API

可以直接利用Svelte的反应式特性：

import comp from './comp.svelte';

let value = 33;

// 创建组件实例
const compInstance = new comp({
    target: document.getElementById('#iframe').contentDocument.getElementById('#container'),
    props: {
        bindme: value
    }
});

// 监听子组件的更新事件，同步到外部value
compInstance.$on('bindme-update', (event) => {
    value = event.detail;
});

// 当外部value变化时，同步更新组件props
$: compInstance.$set({ bindme: value });

场景二：在纯JavaScript环境（非Svelte组件）中使用

可以通过Object.defineProperty来监听变量变化：

import comp from './comp.svelte';

let _value = 33;
const compInstance = new comp({
    target: document.getElementById('#iframe').contentDocument.getElementById('#container'),
    props: {
        bindme: _value
    }
});

// 监听子组件事件更新内部变量
compInstance.$on('bindme-update', (event) => {
    _value = event.detail;
});

// 定义可监听的value变量，变化时同步到组件
Object.defineProperty(window, 'value', {
    get() { return _value; },
    set(newVal) {
        _value = newVal;
        compInstance.$set({ bindme: newVal });
    }
});

原理说明 #

• 子组件通过createEventDispatcher触发自定义事件，把属性的最新值传递给外部
• 外部通过组件实例的$on方法监听事件，更新自己的变量
• 外部变量变化时，调用组件实例的$set方法更新组件的props，完成双向同步

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