svelte - 在 Svelte 中将父方法传递给子对象

Question

正如标题所暗示的，我试图将一个方法从父组件传递给子组件。

例如，

应用程序.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>

待办事项.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 改变了
例如 -
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