面试题：Svelte的slot与action在高级模块化组件整合中的应用

思路

定义卡片组件结构：使用Svelte的组件语法创建卡片的基本结构，包括卡片的样式和布局。
利用slot分发内容：在卡片组件内部设置<slot>标签，用于插入不同的内容，如卡片标题、正文、按钮等，以实现组件的复用性。
创建action增强交互：定义一个action函数，该函数接收DOM元素作为参数，通过操作DOM来添加自定义的交互行为，如鼠标悬停效果、点击事件等。
应用action到卡片组件：在卡片组件的DOM元素上应用action，使卡片具有特定的交互行为。

代码实现要点

组件创建：

<!-- Card.svelte -->
<script>
    // 导入action函数
    import { customAction } from './actions.js';
</script>

<div class="card" use:customAction>
    <slot name="title"></slot>
    <slot></slot>
    <slot name="footer"></slot>
</div>

<style>
   .card {
        border: 1px solid #ccc;
        border - radius: 5px;
        padding: 10px;
    }
</style>

action函数定义：

// actions.js
export function customAction(node) {
    // 鼠标悬停时改变卡片背景颜色
    node.addEventListener('mouseenter', () => {
        node.style.backgroundColor = '#f0f0f0';
    });
    // 鼠标移出时恢复卡片背景颜色
    node.addEventListener('mouseleave', () => {
        node.style.backgroundColor = 'white';
    });
    // 返回一个销毁函数（如果需要清理事件监听器等资源）
    return {
        destroy() {
            node.removeEventListener('mouseenter', () => {
                node.style.backgroundColor = '#f0f0f0';
            });
            node.removeEventListener('mouseleave', () => {
                node.style.backgroundColor = 'white';
            });
        }
    };
}

使用卡片组件：

<!-- App.svelte -->
<script>
    import Card from './Card.svelte';
</script>

<Card>
    <h2 slot="title">卡片标题</h2>
    <p>这是卡片的正文内容。</p>
    <button slot="footer">点击按钮</button>
</Card>

在上述代码中，Card.svelte组件定义了卡片的基本结构，并通过<slot>标签允许外部传入不同的内容。customAction在actions.js中定义，用于为卡片添加鼠标悬停和移出的交互效果。在App.svelte中，通过使用Card组件并传入不同的内容，展示了如何结合slot和action创建一个功能丰富且可复用的卡片组件。

星途面试题库

面试题：Svelte的slot与action在高级模块化组件整合中的应用

知识考点

面试题答案

思路

代码实现要点