设置 customElement: true 时，Svelte 绑定不起作用

Question

我想使用 Svelte 构建自定义元素。

因此，在rollup.config.js我设置customElement: true，然后我必须使用 来引用我的子组件。

但我发现，这样一来，就bind行不通了。这是代码示例

HelloWorld.svelte（子级）

<script>
    import Hello from './components/Hello'
    import World from './components/World'
    export let value;
</script>

<svelte:options tag={'x-app-helloworld'}/>
<input type="text" bind:value={value} >

<input>
<x-app-hello />
<x-app-world />

App.svslte(parent) 的一部分。

<x-app-helloworld bind:value={value}/>

然后父级会显示错误：'value' is not a valid binding on <x-app-helloworld> elements.

我该如何解决这个bind问题？

Answer 1

绑定适用于常规元素，因为 Svelte 知道哪个事件对应于每个绑定 \xe2\x80\x94 例如，它知道当元素触发 a或事件时， valuean 会发生变化。<input>changeinput

\n\n

对于自定义元素，无法知道父级应该监听什么事件（如果有）。目前还没有一种巧妙的方法来从元素内部分派事件。因此，最好的选择是将回调传递给自定义元素，并在值发生变化时调用它：

\n\n

<x-app-helloworld onValueChange="{(x) => value = x}"/>\n

\n\n

<script>\n  export let onValueChange;\n  export let value;\n\n  $: onValueChange(value);\n</script>\n

\n