nuxt.js 中的布局真的有用吗?有什么好处? [英] Are layouts in nuxt.js actually useful? What are the benefits?

问题描述

据我所知，布局只有助于摆脱导入组件和必须将每个页面包装在布局组件中的情况.使用自动导入功能，您甚至可以摆脱导入.所以本质上，您只是省去了将页面包装在布局组件中的需要.

没有组件而只有一个字符串(layout: my-layout")会降低灵活性，因为您无法从页面组件向布局组件传递道具或事件.>

使用布局时是否有性能或任何其他优势?我认为拥有一个布局文件夹是一种很好的做法，但我没有看到在 Options API 中添加布局道具的好处.

解决方案

/r/Nuxt 中的这篇文章很有趣:https://www.reddit.com/r/Nuxt/comments/iy7a9u/eli5_difference_between_components_pages_and

我会引用一些有趣的回复:

<块引用>

布局:如果您知道要在多个页面上使用某些组件(例如页眉和页脚)，则只需将它们导入并添加到布局中，然后在页面上使用此布局需要它.无需在每个页面中单独导入和添加这些必需组件，并且代码重复更少.此外，任何只应应用于特定页面的 css 定义都可以放在那里，而不必分别将它们添加到每个页面/组件.

<块引用>

布局实际上只是顶级包装器组件，它们非常有助于将大量样板代码保存在一个位置，而不是将其插入到每个页面中.例如，我可以有一个博客布局，右侧有一个侧边栏，顶部有面包屑，左侧有一个小部件.我会创建一个blog.vue"这样我就可以保持页面干燥.

TLDR:您应该使用 Layouts 作为顶级包装器以保持干燥.它们不应该有来自 Pages 的任何道具，因为它们正在包装它们.当然，组件也可以完成这方面的工作，但它有点冗长.
IMO 没有性能优势(一切都是组件)，同时 Layouts 更具语义.

As far as I understood, layouts only help to get rid of importing a component and having to wrap every page in a layout component. With the auto import feature you can even get rid of the import. So essentially you are only saving the need of wrapping your pages in your layout components.

Having no component and just a string (layout: "my-layout") reduces flexibility, since you can't pass props or events to the layout component from your page components.

Are there performance or any other advantages when using layouts? I think it's good practise to have a layout folder, but I don't the see a benefit of the addition of the layout prop in the Options API.

解决方案

This post in /r/Nuxt is pretty interesting: https://www.reddit.com/r/Nuxt/comments/iy7a9u/eli5_difference_between_components_pages_and

I'd quote some interesting replies:

Layouts: if you have some components, which you know you want to use on several pages (like the header and footer, for example), you can just import and add these into a layout, then use this layout on the pages that require it. No need to separately import and add those mandatory components into each page separately and there's less duplication of code. Also any css definitions which should apply only to specific pages can be put in there, instead of having to add them to each page/component separately.

Layouts are really just top level wrapper components that are really helpful to keep a lot of the boilerplate code in one spot instead of inserting it into each page. For instance, I could have a blog layout with a sidebar on the right, breadcrumbs on top and a widget on the left. I would create a "blog.vue" so that I can keep my pages DRY.

TLDR: you should use Layouts as the top level wrappers to keep things DRY. They are not supposed to have any props from Pages because they are wrapping them. Of course, a component could also make the job on this regard but it's a bit more verbose.
There is no performance benefit IMO (everything is a component), meanwhile Layouts are more semantic.

这篇关于nuxt.js 中的布局真的有用吗?有什么好处?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！