Блог

Главная - Вопросы по программированию - Стройность: Используйте функцию из родительского компонента

Стройность: Используйте функцию из родительского компонента

#svelte #svelte-component

Вопрос:

В моем приложении.svelte у меня есть следующий код с моей функцией:

 <script>
    import Categories from "./Categories.svelte";

    let choice = { category: false };

    export function toggle() {
         choice.category = !choice.category;
    }
</script>

{#if choice.category}
    <Categories />
{:else}
    <p>Foo.</p>
{/if}

В моем компоненте Категорий у меня есть следующий код:

 <button id="vegetation" on:click="toggle()">
    <span>Analyse vegetation and forestry</span>
</button>

Я хочу вот чего: когда я нажимаю на кнопку в компоненте категории, toggle() должна вызываться функция.

Как я могу это сделать?

Комментарии:

1. Вы можете перенаправить событие щелчка (без использования диспетчера). Пример из учебника: svelte.dev/учебник/dom-переадресация событий

Ответ №1:

Есть два способа:

используйте события

в этом случае ваш компонент вызовет событие, и родитель отреагирует на это:

 <!-- Parent.svelte -->
<script>
  function something() { }
</script>

<Child on:toggle={something} />
 
 <!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

  function toggle() {
     dispatch('toggle')
  }
</script>

<button on:click={toggle}>click me</button>

Читайте о событиях в документах

передать функцию

Альтернативным подходом является передача функции в качестве опоры.

 <!-- Parent.svelte -->
<script>
  function parentToggle() { }
</script>
<Child toggle={parentToggle} />
 
 <!-- Child.svelte -->
<script>
  export let toggle = () => {} // no-operation function
</script>
<button on:click={toggle}>Click me</button>
Метки: