复制组件，因为布局在svelte中
复制组件，因为布局在svelte中
提问于 2022-11-02 02:44:26
我在svelte中，我有一个组件TopNav，它有许多自定义属性，比如clientPage (不管它是否是客户端页面)，我的根+layout.svelte中有TopNav组件，如下所示：
<!-- /routes/+layout.svelte -->
<script>
import TopNav from "@components/TopNav.svelte";
</script>
<TopNav noSpace />
<slot />还有我的一个嵌套页面/routes/app/+page.svelte
<!-- /routes/app/+page.svelte -->
<script>
import TopNav from "@components/TopNav.svelte";
</script>
<TopNav noSpace clientPage>
TopNav with content
</TopNav>现在，它编译成这样的东西：
<!-- mock compiled code shiped to browser -->
<script>
import TopNav from "@components/TopNav.svelte";
</script>
<TopNav noSpace />
<TopNav noSpace clientPage>
TopNav with content
</TopNav>我是否可以删除布局中的第一个TopNav组件，或者使用类似于svelte:head的方法来更改第一个TopNav的显示方式？
我尝试在/app/中创建一个布局文件，如下所示：
<!-- /routes/app/+layout.svelte -->
<slot />然而，它仍然以同样的方式编译。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-02 03:24:09
有一种方法可以对具有特定布局的页面进行分组(在目录名中使用(...) )，并打破布局链(使用@，可选地后面跟着要中断到的级别)。
尽管没有办法跳过根布局。您可能只需使根布局为空/删除不总是存在的元素，并将app之外的所有内容分组到一个单独的组中，其中包含一个不同的TopNav (组不影响TopNav)。
类似于：
src/routes/
├ app/
│ ├ +page.svelte
│ └ +layout.svelte
├ (default)/
│ ├ ...
│ ├ ...
│ ├ ...
│ └ +layout.svelte
└ +layout.svelte有关详细信息，请参阅文档的高级布局部分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74283841
复制相关文章
相似问题
腾讯云开发者
