如何在Pug父模板中为引入的子模板传递参数？

当然可以给Pug的子模板传递参数！而且有两种非常实用的方式，完美匹配你多次引入子模板传不同值的需求，我给你详细拆解一下：

方法一：直接通过include传递局部变量 #

这种方式最直接，适合简单的参数传递场景。你的子模板example.pug已经定义了#{name}变量，只需要在父模板引入时直接给这个变量赋值即可：

子模板（example.pug） #

p #{name}'s Pug source code!

父模板（parent.pug） #

h1 Hello world
//- 直接传递字符串值
include example.pug name="name1"
//- 也可以传递父模板中定义的变量
- let userName = "name2"
include example.pug name=userName

渲染后的HTML结果：

<h1>Hello world</h1>
<p>name1's Pug source code!</p>
<p>name2's Pug source code!</p>

这里要注意：传递的name变量是局部作用域，只会在当前引入的子模板中生效，不会干扰父模板或其他子模板的变量。

方法二：使用Mixin（混合宏）实现更灵活的复用 #

如果你的子模板需要多次复用、传递多个参数，或者需要默认值，用Mixin会更合适。我们先把子模板改造成Mixin：

子模板（example.pug） #

//- 定义一个接受name参数的Mixin
mixin example(name)
  p #{name}'s Pug source code!

//- 也可以给参数加默认值，调用时不传参就会用默认值
// mixin example(name = "默认用户")
//   p #{name}'s Pug source code!

父模板（parent.pug） #

h1 Hello world
//- 先引入包含Mixin的子模板
include example.pug
//- 调用Mixin并传递参数
+example("name1")
+example("name2")

//- 也可以用变量调用
- let newUser = "自定义用户"
+example(newUser)

渲染后的HTML和方法一一致，但Mixin的扩展性更强——比如你可以给它加多个参数，甚至支持嵌套内容，非常适合复杂的组件复用场景。

内容的提问来源于stack exchange，提问作者xiaolingxiao