如何改造Svelte项目中现有Chip组件以实现高效复用

核心问题：原有组件硬绑定了项目专属的redirectUris全局store，且删除逻辑内聚在组件内部，无法适配不同数据源场景。

改造后的Chips组件代码 #

<script>
import close from '../../asset/icon/tip/close.svg';
import { createEventDispatcher } from 'svelte';

// 对外暴露props，接收父组件传入的标签列表
export let labels = [];
const dispatch = createEventDispatcher();
</script>

<div class="chips">
  {#each labels as uri, index}
    <div class="chip">
      <p class="chip-name">{uri}</p>
      <button
        on:click={() => {
          console.log(uri);
          // 抛出删除事件，将下标和当前值传递给父组件
          dispatch('remove', { index, value: uri });
          console.log(labels);
        }}>
        <img src={close} alt="关闭" />
      </button>
    </div>
  {/each}
</div>

<!-- 原有chips、chip类的样式代码保留即可，无需修改 -->

父组件调用方式 #

完全符合你期望的简便调用逻辑，只需额外监听删除事件处理数据源更新即可：

<script>
import Chips from './Chips.svelte';
let labels = ["foo", "bar"];

// 处理删除事件
function handleRemove(e) {
  const { index } = e.detail;
  labels.splice(index, 1);
  // Svelte数组修改后需要重新赋值触发响应式更新
  labels = labels;
}
</script>

<Chips {labels} on:remove={handleRemove} />

可选扩展优化 #

如果需要适配更多场景，可以按需扩展props：

• 新增export let showDelete = true，控制是否渲染删除按钮，适配仅展示的场景
• 新增export let displayField = ''，如果传入的labels是对象数组，可以指定要显示的字段
• 新增export let customClass = ''，支持自定义外层容器样式

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