Nuxt3 - 实现页面给 layouts 布局模板传递参数，在页面中通过 props 传递给布局模板参数，实现个性化布局教程（页面使用布局模板时，如何给layout布局传参数问题详解）

前言

虽然布局是一套，但是不同页面可能仅有一点 “细微变化”，例如全部页面都有搜索框，但首页没有（再写一个模板显然不是明智之举，最好的方法就是通过给模板传递参数让其控制显示隐藏）。

本文 实现了在 nuxt3 项目开发中，当页面使用布局模板（layouts）时，通过 props 给布局模板传递参数，并让布局模板组件内部接收到参数（不只是模板传参，还提供了多种 JS 方式供您使用，每一个都保证简单好用！）

有些项目不方便使用模板传参，所以本文贴心准备了多种 JS 方案。

---

如下图所示，【首页】和【咨询中心】两个页面都用了同一个模板，他们通过向模板组件传递参数来获得不同的个性化，

紫色条就是模板组件内部，鼠标选取的数据就是这俩页面单独传递的参数。

详细示例代码，您根据需求选择一种方式即可！

第 1 种方式