如何在 svelte 组件的标签之间使用文本？

Question

假设我有两个组件：

Bold1.svelte:

<script>
    external let t="";
</script>
<b>{t}</b}

用法：

<Bold1 t="my text 1" />

按预期工作。

Bold2.svelte:

<script>    
</script>
<b>???</b>

用法：

<Bold2>
    my text 2
</Bold2>

我必须写什么来代替 ???获得一个大胆的my text 2？我试过<b>{this}</b>，但没有成功。

Answer 1

您是否尝试传递 HTML 并将其呈现为 HTML？如果 var t 有 HTML，你可以这样渲染它： {@html t}

https://svelte.dev/docs

请注意 XSS 风险。

Answer 2

获取插槽内容。

App.svelte:

<script>
    import Child from './Child.svelte';
</script>

<Child>Hi</Child>

Child.svelte

<script>
    import { onMount } from 'svelte';
    
    let thisObj;
    let text = '';
    
    onMount(() => {
        text = thisObj.textContent;
    });
</script>

<div bind:this={thisObj}>
    <slot />
</div>

<h3>
    Slot content-1: {text}
</h3>

如何在 svelte 组件的标签之间使用文本？

How to use text between the tags in a svelte component?

components

svelte