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

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 后，您无法动态“调用”mixins，因为这需要 Pug 渲染器在后台某处运行，侦听此类请求。另请参阅官方 Pug 存储库上相关 Github 问题的评论。

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