使用 Pug 语言时 Vue 模板的“Mustache”语法替代方案答案

【问题标题】："Mustache" syntax alternative for Vue template when using Pug language使用 Pug 语言时 Vue 模板的“Mustache”语法替代方案
【发布时间】：2020-07-19 03:00:44
【问题描述】：

"Mustache" 语法允许像这样定义数据：

<template>
    <Window>
        <template v-slot:title >
            {{title}}
        </template>
    </Window>
</template>

但使用lang='pug' 编译失败：

<template lang='pug'>
    <Window>
        <template v-slot:title >
            {{title}}
        </template>
    </Window>
</template>

出现此错误：

模块构建失败：意外文本“{{” ...

没有mustache 语法用法的其他模板使用lang='pug' 构建良好。 Pug 的 mustache 语法替代方案是什么？

【问题讨论】：

标签： vue.js vuejs2 pug nuxt.js

【解决方案1】：

请注意，您的 Pug 模板的内容实际上并不是 Pug 语法，但除此之外：

在 Pug 中，plaintext 应该在标签内（例如，span）或以管道字符为前缀：

<template lang="pug">
Window
  template(v-slot:title="")
    | {{title}}
</template>

demo

【讨论】：

成功了！非常感谢你。您能否也请指出为什么它必须是template(v-slot:title="")，而不是template(v-slot=title)？我认为 Pug 需要像这样传递 key=value 对。