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

39 篇文章 284 订阅 ¥9.90 ¥99.00

前言

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

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

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


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

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

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

在这里插入图片描述

第 1 种方式

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值