Передача родительского метода дочернему в Svelte

Как следует из названия, я пытаюсь передать метод родительского компонента дочернему компоненту.

Например,

App.html

<div>
  <TodoItem
     done={todo.done}
     toggle={toggle}
  />
</div>
<script>
 import TodoItem from './TodoItem.html';
 export default {
   components: {
     TodoItem,
   },
   methods: {
     toggle(index) {
       console.log(index);
     },
   },
 };
</script>

TodoItem.html

<div>
  <button on:click="toggle(0)"></button>
</div>
<script>
 export default {
   methods: {
     toggle(index) {
       // a guess. this works if you pass in console.log
       this.options.data.toggle(index)
     },
   },
 };
</script>

Желаемая функциональность заключается в том, что TodoItem вызывает родительский метод с его данными.

Этот пример не работает, консоль регистрирует TypeError: this.options.data.toggle is not a function.


7
6 450
2

Ответы:

Решено

Это возможный для передачи методов дочерним компонентам, но это немного неудобно. Более идиоматический подход - запустить событие из дочернего компонента и прослушать это событие из родительского компонента:

App.html

<div>
  <TodoItem
    {todo}
    on:toggle="toggle(todo)"
  />
</div>
<script>
  import TodoItem from './TodoItem.html';
  export default {
    components: {
      TodoItem,
    },
    methods: {
      toggle(todo) {
        todo.done = !todo.done;
        const { todos } = this.get();
        this.set({ todos });
     }
   }
 };
</script>

TodoItem.html

<div>
  <button on:click="fire('toggle')">{todo.description}</button>
</div>

Если вам нужно передать событие через несколько уровней компонентов, вы можете просто повторно запустить событие ...

<TodoItem on:toggle="fire('toggle', event)">...</TodoItem>

... но есть сокращение, означающее то же самое:

<TodoItem on:toggle>...</TodoItem>

Похоже, что "fire" был частью svelte v2, но в svelte v3 его заменили createEventDispatcher.

например -

child.svelte

<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

parent.svelte

<script>
    import Inner from './child.svelte';

    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>

<Inner on:message={handleMessage}/>

для получения дополнительной информации посетите: https://svelte.dev/tutorial/component-events