面试题：Svelte中构建可复用UI组件的基础方法

Question

在Svelte中，简述构建可复用UI组件的基本步骤，包括如何定义组件的props以及如何处理组件间的样式隔离。

Answer 1

1. 创建组件文件：
   • 在Svelte项目中，为组件创建一个单独的.svelte文件。例如，创建一个Button.svelte文件用于定义按钮组件。
2. 定义组件的props：
   • 在组件文件的<script>标签内，使用export关键字来定义组件接收的属性（props）。
   • 示例：

   <script>
       export let text = '默认文本';
       export let disabled = false;
   </script>
   

   • 这里text和disabled就是定义的props，text有默认值'默认文本'，disabled有默认值false。在使用组件时，可以传入不同的值来覆盖默认值。
3. 组件模板编写：
   • 在<script>标签后的区域编写组件的HTML模板。可以使用定义的props。
   • 示例：

   <script>
       export let text = '默认文本';
       export let disabled = false;
   </script>
   
   <button {disabled}>{text}</button>
   

4. 处理组件间的样式隔离：
   • Svelte默认会为每个组件生成唯一的CSS选择器，实现样式隔离。
   • 在组件的<style>标签内编写的样式仅作用于该组件。
   • 示例：

   <script>
       export let text = '默认文本';
       export let disabled = false;
   </script>
   
   <button {disabled}>{text}</button>
   
   <style>
       button {
           background - color: blue;
           color: white;
           padding: 10px 20px;
           border: none;
           border - radius: 5px;
       }
   
       button:disabled {
           background - color: gray;
       }
   </style>
   

   • 这里定义的按钮样式只会应用到该Button.svelte组件中的按钮，不会影响其他组件中的按钮样式。