如何在苗条组件的标签之间使用文本？答案

【问题标题】：How to use text between the tags in a svelte component?如何在苗条组件的标签之间使用文本？
【发布时间】：2021-04-12 11:09:19
【问题描述】：

假设我有两个组件：

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>，但没有成功。

【问题讨论】：

使用：
是的，我正在寻找。现在我想澄清如何将的内容分配给变量。像 let x = $$slots;我知道这不是答案...

标签： components svelte

【解决方案1】：

获取槽内容。

App.svelte：

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

<Child>Hi</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 教程中。

【解决方案2】：

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

https://svelte.dev/docs

请注意 XSS 风险。

【讨论】：

对不起，我正在寻找。还是谢谢！