在 Svelte 中将父方法传递给子节点答案

【问题标题】：Passing Parent Method to Child in Svelte在 Svelte 中将父方法传递给子节点
【发布时间】：2018-11-15 02:13:04
【问题描述】：

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

例如，

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。

【问题讨论】：

标签： svelte

【解决方案1】：

可能将方法传递给子组件，但这有点尴尬。更惯用的方法是从子组件触发事件并从父组件监听该事件：

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>

【讨论】：

如果孩子不是一个组件而是一个简单的<button>怎么办？
正如 Ujjwal Kumar Gupta 指出的那样，这在 Svelte 3 中更容易。也许值得在 Svelte 2 版本中使用 Svelte 3 示例更新此答案，因为这已被接受为正确答案。

【解决方案2】：

似乎“火”是 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

【讨论】：