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

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

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>

Answer 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 './Inner.svelte';

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

<Inner on:message={handleMessage}/>

更多信息-请访问：https://svelte.dev/tutorial/component-events

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

2 个答案: