布局思维道具的内容可以更改吗？

Question

我有那个布局：

<template>
  ...navigation for all pages..
  <h1>content for X??</h1>
  <slot />
  ...footer for all pages...
</template>

对于页面/index.vue：

<template>
  index is here ok :)
</template>

和页面/about.vue：

<template>
 about is here ok :)
</template>

我希望我可以在不同页面的布局中渲染 h1，而不是为所有页面打印相同的文本。

我知道我可以将 h1 从布局移动到页面并编辑每个页面。

但是h1和slot之间有很多内容，我只想更改文本。

Answer 1

有很多方法可以实现您的要求，但最简单的是使用命名槽。

在 vue 文档中（请花一些时间深入研究它，可用的详细信息和解释的数量非常可观）：

<slot>

元素有一个特殊的属性，名称，可用于为不同的插槽分配唯一的ID，以便您可以确定应在何处呈现内容。

在 nuxt 布局中使用命名槽的过程记录在 nuxt 布局文档中。 您可以在 nuxt 项目的

TitleLayout.vue

文件夹中创建一个

layouts

组件，如下所示：

<!-- layouts/TitleLayout.vue -->
<template>
    <div>
        <nav>
            <nuxt-link to="/"> index </nuxt-link>
            <nuxt-link to="about"> about </nuxt-link>
        </nav>
        <main>
            <h1>
                <slot name="heading">
                    a default title
                </slot>
            </h1>
            <slot/>
        </main>
    </div>
</template>

您可以在您的

pages/About.vue

（或任何其他页面）中像这样使用它

<!-- pages/About.vue -->
<template>
    <div>
        <NuxtLayout name="with-title">
            <template #heading> Hello from the about title </template>

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eius
            rem, sit repellendus reiciendis explicabo? Dolorum totam molestias
            adipisci cupiditate distinctio, libero dolorem iusto, quidem esse
            excepturi voluptatem repellendus facere.

        </NuxtLayout>
    </div>
</template>

<script setup>
definePageMeta({
  layout: 'titleLayout',
});
</script>