javascript - 当 customElement : true is set 时，Svelte 绑定(bind)不起作用

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

绑定(bind)适用于常规元素，因为 Svelte 知道每个绑定(bind)对应于哪个事件——例如，它知道 value的 <input>当元素触发 change 时发生变化或 input事件。

对于自定义元素，没有办法知道父元素应该监听什么事件(如果有的话)。而且目前没有一种从元素内部分派(dispatch)事件的巧妙方法。所以最好的选择是将回调传递给自定义元素，并在值发生变化时调用它:

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

<script>
  export let onValueChange;
  export let value;

  $: onValueChange(value);
</script>