如何将数据传递给 Svelte 中动态嵌套的自定义元素？

Question

CMS 返回带有自定义元素的 HTML 和相应的 props。

<!-- index.html -->

<svelte-accordion props='{"toggleAll":true}'>
  <svelte-accordion-item props='{"title":"Accordion item 1"}'>
    <p>Content of the first accordion item</p>
  </svelte-accordion-item>
  <svelte-accordion-item props='{"title":"Accordion item 2"}'>
    <p>Content of the second accordion item</p>
  </svelte-accordion-item>
  <svelte-accordion-item props='{"title":"Accordion item 3"}'>
    <p>Content of the third accordion item</p>
  </svelte-accordion-item>
</svelte-accordion>

我们的想法是为自定义元素使用 Svelte 组件，如下所示：

// Accordion.svelte

<svelte:options tag="svelte-accordion" />

<script>
  export let props;
</script>

<slot parentProps={props} />

// AccordionItem.svelte

<svelte:options tag="svelte-accordion-item" />

<script>
  export let props;
  export let parentProps;
  const { title } = JSON.parse(props);

  // parentProps is undefined
  console.info('__parentProps__', parentProps);
</script>

<h2>{title}</h2>
<slot />

在上面的例子中AccordionItem.svelte 无法接收到Accordion.svelte 传递的props。原因可能是props实际上是传递给Accordion.svelte内的<slot>，而不是直接传递给<svelte-accordion-item>。

我们如何解决这个问题？

感谢您的帮助！

Answer 1

当您执行<slot parentProps={props}> 时，parentProps 不会自动发送到 prop 的内容，而是在 Accordion 组件上以 let:parentProps 的形式提供。请注意，如果您认为不必使用组件来填充 slot，这将非常有意义：

<Accordion>
  <span>Some content here</span>
</Accordion>

在上面的示例中，没有 组件 可以将这些道具发送到！

要解决您的问题，您可以考虑使用ContextAPI，这使我们可以使变量可用于组件的所有后代。

<!-- Accordion.svelte -->

<svelte:options tag="svelte-accordion" />

<script>
  import { setContext } from 'svelte';
  export let props;
  setContext('parentProps', props)
</script>

<slot />

<!-- AccordionItem.svelte -->
<svelte:options tag="svelte-accordion-item" />

<script>
  import { getContext } from 'svelte';
  export let props;

  const parentProps = getContext('parentProps');
  const { title } = JSON.parse(props);

  // parentProps is undefined
  console.info('__parentProps__', parentProps);
</script>

<h2>{title}</h2>
<slot />