javascript - Svelte bind is not working when customElement: true is set - Stack Overflow

admin管理员组

文章数量:1334122

I want to build a custom element using Svelte.

Thus in rollup.config.js I set customElement: true, and then I have to use the to refer to my child ponents.

But I found that in this way, the bind will not work. Here is the code example

HelloWorld.svelte (child)

<script>
    import Hello from './ponents/Hello'
    import World from './ponents/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) part of it.

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

Then the parent will show an error: 'value' is not a valid binding on <x-app-helloworld> elements.

How could I solve this bind problem?

I want to build a custom element using Svelte.

Thus in rollup.config.js I set customElement: true, and then I have to use the to refer to my child ponents.

But I found that in this way, the bind will not work. Here is the code example

HelloWorld.svelte (child)

<script>
    import Hello from './ponents/Hello'
    import World from './ponents/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) part of it.

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

Then the parent will show an error: 'value' is not a valid binding on <x-app-helloworld> elements.

How could I solve this bind problem?

• javascript
• data-binding
• svelte

Share Improve this question Follow asked Jun 4, 2020 at 3:22 Xiao MaXiao Ma 9522 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Bindings work on regular elements because Svelte knows which event corresponds to each binding — for example, it knows that the value of an <input> changes when the element fires a change or input event.

With custom elements, there's no way to know what event (if any) the parent should be listening for. And there isn't currently a neat way to dispatch events from inside the element. So the best option is to pass in a callback to the custom element, and call it whenever the value changes:

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

<script>
  export let onValueChange;
  export let value;

  $: onValueChange(value);
</script>

本文标签： javascriptSvelte bind is not working when customElement true is setStack Overflow