kaisermann / svelte-loadable

Dynamically load a svelte component
MIT License
320 stars 13 forks source link

is there anyway to use bind? #25

Closed Arstman closed 4 years ago

Arstman commented 4 years ago

hi, I have try svelte-loadable and it works great, but when i try to binding any value from the parent component to a child component, it seem doesn't work in anyway.

App.svelte


<script>
  import Loadable from 'svelte-loadable';
  let login =false;

 </script>

<Loadable loader={() => import('./Login.svelte')} bind:login={login} /> 

Login.svelte

<script>

  export let login = false;

  function handleLogin() {
      login=true
   }

</script>
<button 
  class="  text-white rounded-full bg-primary-900 b" 
   type="button"
    on:click|preventDefault={handleLogin} 
 >
                  Login
</button>

anything i did wrong?

kaisermann commented 4 years ago

Yeah, there is! Found a nasty bug while investigating your issue and released v1.3.2. However, to be able to bind to a loaded component prop, you must use svelte:component inside the default slot, instead of trying to bind it directly to the Loadable component. Check the readme to see an example: https://github.com/kaisermann/svelte-loadable#slots

Here's a REPL to help you: https://svelte.dev/repl/ee4e0487586f42c89582e58dd1686c20?version=3.17.0

Arstman commented 4 years ago

great ! @kaisermann , you are the best!

Thanks a lot.