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

Question

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

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

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

HelloWorld.svelte (child)

<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}/>

然后parent会报错：'value' is not a valid binding on <x-app-helloworld> elements.

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

Answer 1

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

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

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

<script>
  export let onValueChange;
  export let value;

  $: onValueChange(value);
</script>

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

Svelte bind is not working when customElement: true is set

javascript

data-binding

svelte