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

【问题标题】：Svelte bind is not working when customElement: true is set设置 customElement: true 时，Svelte 绑定不起作用
【发布时间】：2020-06-04 03:22:47
【问题描述】：

我想使用 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 问题？

【问题讨论】：

标签： javascript data-binding svelte

【解决方案1】：

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

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

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

<script>
  export let onValueChange;
  export let value;

  $: onValueChange(value);
</script>

【讨论】：