如何从 pug mixin 中的对象解构嵌套道具？答案

【问题标题】：How to destructure nested props from object in pug mixin?如何从 pug mixin 中的对象解构嵌套道具？
【发布时间】：2020-04-18 19:30:06
【问题描述】：

所以我想构建 pug mixin：

mixin productTile({img, title, desc, price, withCatLink = false, cat: {title = '', path = ''} = {}})
  .ProductTile
    p
      +icon({name: 'long-arrow-right'})

我这样称呼它：

-
  const prodInfo = {
    img: '/img/icon.png',
    title: 'test title',
    desc: 'testdesc',
    price: '1200',
    withCatLink: true,
    cat: {
      title: 'test category',
      path: ''
    }
  };

+productTile(prodInfo)

但我正面临着这个问题：

SyntaxError: Argument name clash (366:103)

所以也许我对对象道具解构有误，因为当我从 mixin 声明中删除 cat: {title = '', path = ''} = {} 时，一切正常

【问题讨论】：

标签： javascript pug mixins

【解决方案1】：

您正在解构两个字段，并为其分配名称title，因此您会在那里遇到冲突。解构时只需重命名其中一个。例如：

mixin productTile({img, title, desc, price, withCatLink = false, cat: {title: catalogTitle = '', path = ''} = {}})
  .ProductTile
    p
      +icon({name: 'long-arrow-right'})

【讨论】：