英文:
How to pass a variable to a slot in Svelte?
问题
I can help with the translation:
"我刚刚开始使用插槽，并希望在不使用存储（例如颜色、活动状态等）的情况下将变量传递给插槽，但尽管多次阅读教程，我无法使其正常工作。
我制作了一个REPL示例：将变量传递给插槽。
理想情况下，我想从外部组件设置变量（即“#f00”），但也可以由具有插槽的组件设置（即“#0f0”）。
提前感谢您！"
英文:
I'm just getting started with slots and would like to pass variables to the slot without using stores (e.g. colors, active state, etc), but I can't get it to work, despite having read the tutorial several times.
I've made a REPL to illustrate: Passing variables to slots.
Ideally, I would like to set the variable from the outer component (i.e. "#f00"), but having it set by the component with the slot would be okay as well (i.e. "#0f0").
Thank you in advance!
Edit: Source:
<!-- Icon.svelte -->
<script>
export let fillColor = "#00f";
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height=24 width=24
><path
d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.60 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.13 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill={fillColor}/></svg>
<!-- IconWrapper.svelte -->
<script>
export let fillColor = '#0f0';
</script>
<div>
<slot fill={fillColor}/>
</div>
<!-- App.svelte -->
<script>
import IconWrapper from "./IconWrapper.svelte"
import Icon from "./Icon.svelte"
export let fillColor = '#f00';
</script>
<IconWrapper {fillColor}>
<Icon></Icon>
</IconWrapper>
答案1
得分: 4
以下是您要翻译的内容：
你已经快要完成了，我建议改变一下名称，因为如果一切都叫同样的名字，可能会让人感到困惑。
IconWrapper 和 Icon 组件没问题（在这里将 fillColor 重命名为 fill）：
<!-- IconWrapper.svelte -->
<script>
export let fillColor = '#0f0';
</script>
<div>
<slot fill={fillColor}/>
</div>
<!-- Icon.svelte -->
<script>
export let fillColor = "#00f";
</script>
{fillColor}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height=24 width=24>
<path
d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.60 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.13 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill={fillColor}/>
</svg>
现在，您可以使用 let: 语法从提供 slot 的组件中获取一个值，通过在组件本身上添加 let:，该变量将在该组件的范围内定义。
<!-- App.svelte -->
<script>
import IconWrapper from "./IconWrapper.svelte"
import Icon from "./Icon.svelte"
const fillColor = '#f00';
</script>
<IconWrapper {fillColor} let:fill>
<Icon fillColor={fill}></Icon>
</IconWrapper>
英文:
You are almost there, I would suggest to mix up names though because if everything is called the same it might get confusing.
The IconWrapper and Icon components are ok (renamed fillColor to fill in one place here)
<-- IconWrapper.svelte -->
<script>
export let fillColor = '#0f0';
</script>
<div>
<slot fill={fillColor}/>
</div>
<!-- Icon.svelte -->
<script>
export let fillColor = "#00f";
</script>
{fillColor}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height=24 width=24
><path
d="M14.12 10.47L12 12.59l-2.13-2.12-1.41 1.41L10.60 14l-2.12 2.12 1.41 1.41L12 15.41l2.12 2.13 1.41-1.41L13.41 14l2.12-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9z" fill={fillColor}/></svg>
Now you can use the let: syntax to get a value from the component providing the slot to the component using the slot, you do this by putting let: on the component itself, this variable will then be defined within the scope of that component.
<!-- App.svelte -->
<script>
import IconWrapper from "./IconWrapper.svelte"
import Icon from "./Icon.svelte"
const fillColor = '#f00';
</script>
<IconWrapper {fillColor} let:fill>
<Icon fillColor={fill}></Icon>
</IconWrapper>
As you see here, I pass fillColor to the wrapper, which gives me fill back, that is then passed to Icon.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论