Say you want to pass a state variable (like a recipe title), to an input component, and you immediately want to change the title variable when data on this input component is changed, you can use bind:value={statevariableName};

 <input {type} bind:value={$form.name} class="inputClass" />

However, we are often not using the regular html input elements, but custom Input components. For that, we use bindable in the prop definitions;

E.g. in the parent, we still use bind:value;

but in this child component (Input.Svelte), we use $bindable(..) for this particular prop;

Then again, in this child component, we use bind:value for the input

 {:else}
        <input {type} bind:value {...attrs} class="inputClass {className}" />
    {/if}

There might be other ways to do this, but this worked for me:)

Now, if you want to let the parent component know there was a click, on keypress on the child component, refer to; dispatching events note