我希望能够重用使用 Svelte 制作的 Chip 组件

Question

很难在我的项目中重用当前运行的 Chip 组件。我想修改代码以使其更易于重用。

比如我想让它像这样好用

let labels=["foo", "bar"];

<Chips labels="{labels}" >

当前源代码

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

function removeFromList(index) {
  $redirectUris.splice(index, 1);
  $redirectUris = $redirectUris;
}
</script>

<div class="chips">
  {#each $redirectUris as uri, index}
    <div class="chip">
      <p class="chip-name">{uri}</p>
      <button
        on:click="{() => {
          console.log(uri);
          removeFromList(index);
          console.log($redirectUris);
        }}">
        <img src="{close}" alt="close" />
      </button>
    </div>
  {/each}
</div>

Answer 1

删除对您商店的引用并将其替换为属性:

<script>
import close from '../../asset/icon/tip/close.svg';

export let labels = [];
</script>

<div class="chips">
  {#each labels as label, index}
    <div class="chip">
      <p class="chip-name">{label}</p>
      <button
        on:click="{() => {
          labels.splice(index, 1);
          labels = labels;
        }}">
        <img src="{close}" alt="close" />
      </button>
    </div>
  {/each}
</div>

然后您就可以像上面发布的那样使用它了。如果您需要更新父组件中的芯片，请使用 bind 建立双向绑定：

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

<Chips bind:labels />

如果您需要“芯片删除”事件，您可以使用事件调度程序：https://svelte.dev/docs#createEventDispatcher

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

export let labels = [];
const dispatch = createEventDispatcher();
</script>

<div class="chips">
  {#each labels as label, index}
    <div class="chip">
      <p class="chip-name">{label}</p>
      <button
        on:click="{() => {
          labels.splice(index, 1);
          labels = labels;
          dispatch('close', { label, index });
        }}">
        <img src="{close}" alt="close" />
      </button>
    </div>
  {/each}
</div>

我希望能够重用使用 Svelte 制作的 Chip 组件

I want to be able to reuse Chip components made with Svelte

components

svelte