如何将数据传递给Svelte中动态嵌套的自定义元素？
如何将数据传递给Svelte中动态嵌套的自定义元素？
提问于 2021-11-29 03:19:03
CMS返回带有自定义元素和各自属性的HTML。
<!-- 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传递的道具。原因可能是道具实际上是在Accordion.svelte中传递给<slot>，而不是直接传递给<svelte-accordion-item>。
我们该如何解决这个问题呢？
谢谢你的帮助!
回答 1
Stack Overflow用户
发布于 2021-11-29 06:39:19
当您执行<slot parentProps={props}>时，parentProps不会自动发送到prop的内容，而是在Accordion组件上以let:parentProps的形式提供。请注意，如果您认为不必使用组件来填充插槽，那么这是非常有意义的
<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 />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70149391
复制相关文章
相似问题
腾讯云开发者
