Передача родительского метода ребенку в Svelte - PullRequest
Новая
       8

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

0 голосов
/ 05 июня 2018

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

Например,

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.

1 Ответ

0 голосов
/ 05 июня 2018

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

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>
...