Svelte中如何将父组件的mouseover函数绑定到子组件

这里提供几种直接可行的方案，不用在子组件重复定义函数：

方案1：子组件接收父组件传递的函数并绑定到内部元素 #

子组件通过props接收父组件的函数，直接绑定到自己的DOM元素上，是最直观的实现方式：

修改Child.svelte：

<script>
  // 接收父组件传递的函数
  export let onMousedown;
  export let onMouseover;
</script>

<div draggable="true" on:mousedown={onMousedown} on:mouseover={onMouseover}>Child text</div>

父组件调用时直接传入对应函数（注意要补全原代码中未定义的handleMouseDown函数）：

<script>
    import Child from './Child.svelte';

    function handleMouseDown() {
        // 你的事件处理逻辑
    }

    function handleMouse(){
        // 你的事件处理逻辑
    }

</script>

<Child onMousedown={handleMouseDown} onMouseover={handleMouse}/>

<div draggable="true" on:mousedown={handleMouseDown} on:mouseover={handleMouse}>Text</div>

方案2：子组件转发内部元素的原生事件 #

如果不需要传递函数，而是希望父组件直接监听子组件内部元素的原生事件，可以让子组件转发这些事件——在子组件的DOM元素上添加事件监听，Svelte会自动将事件冒泡到父组件：

修改Child.svelte：

<!-- 直接添加事件监听，Svelte会自动转发到父组件 -->
<div draggable="true" on:mousedown on:mouseover>Child text</div>

父组件无需修改调用逻辑（同样要补全handleMouseDown函数）：

<script>
    import Child from './Child.svelte';

    function handleMouseDown() {
        // 你的事件处理逻辑
    }

    function handleMouse(){
        // 你的事件处理逻辑
    }

</script>

<Child on:mousedown={handleMouseDown} on:mouseover={handleMouse}/>

<div draggable="true" on:mousedown={handleMouseDown} on:mouseover={handleMouse}>Text</div>

方案3：通过bind:this获取子组件元素手动绑定事件（不推荐） #

这种方式需要子组件暴露内部DOM元素，父组件拿到后手动添加事件监听，代码冗余且不够优雅，仅作参考：

Child.svelte：

<script>
  export let element;
</script>

<div draggable="true" bind:this={element}>Child text</div>

Parent.svelte：

<script>
    import Child from './Child.svelte';
    import { onMount } from 'svelte';

    let childElement;

    function handleMouseDown() {
        // 你的事件处理逻辑
    }

    function handleMouse(){
        // 你的事件处理逻辑
    }

    onMount(() => {
        if (childElement) {
            childElement.addEventListener('mousedown', handleMouseDown);
            childElement.addEventListener('mouseover', handleMouse);
        }

        // 组件销毁时记得移除事件监听，避免内存泄漏
        return () => {
            if (childElement) {
                childElement.removeEventListener('mousedown', handleMouseDown);
                childElement.removeEventListener('mouseover', handleMouse);
            }
        };
    });

</script>

<Child bind:element={childElement}/>

<div draggable="true" on:mousedown={handleMouseDown} on:mouseover={handleMouse}>Text</div>

内容的提问来源于stack exchange，提问作者ewfewfjio