从 Vue 脚本中获取 Pug/Jade 混合参数

Question

是否可以将 mixin 参数绑定到 vue 实例？

我有这个 mixin 来渲染一个表格：

mixin table(header,data,type)
- var type = type || ""
table.table(class=type)
    thead
        tr
            each head, i in header
                th #{head}
    tbody
        each row,j in data
            tr
                each col,k in row
                    td #{col}

可以这样正常使用：

+table-striped(["#","First Name","Last Name","Username"],[["1","Mark","Otto","@mdo"],["2","Jacob","Thornton","@fat"],["3","Larry","the Bird","@twitter"]])

我的问题是是否可以从 vue 实例中获取 mixin 的 'header' 和 'data' 参数。

Answer 1

我认为您将服务器端渲染（这是 Pug 所做的）与客户端渲染（这是 Vue.js 通常用于完成的任务）混淆了。在创建 HTML 之后，您不能动态地“调用”mixin，因为这将需要 Pug 渲染器在后台某处运行，以侦听此类请求。另请参阅 this comment 在官方 Pug 存储库上的相关 Github 问题。

但是，您仍然可以将 Vue.js 与 Pug 结合使用，只是不能这样。不要使用 mixin，而是考虑制作一个自定义 Vue.js 组件来获取类似的输入，然后通过 some JS-pug-variable magic 注入所需的数据。