在Svelte中将父方法传递给孩子

Question

如标题所示，我正在尝试将方法从父组件传递给子组件。

例如，

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。

Answer 1

似乎“火”是 svelte v2 的一部分，但在 svelte v3 中它改变了 createEventDispatcher

例如——

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

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