Skip to content

namedTemplate

稳定性: 实验性 ⚠️ 实验性功能,风险自负

WARNING

目前没有积极维护。请试试 createReusableTemplate

通过开启 namedTemplate<template> 可以像变量一样被引用。

有时候我们需要把非常简单的组件颠倒顺序,但又不想放弃 Vue 模板的特性而使用 JSX/TSX。那么这个功能就非常有用了。

如果你支持此功能,欢迎在 讨论 中点赞 👍 或评论。

特性支持
Vue 3
Vue 3.3
Nuxt 3
Vue 2
TypeScript / Volar

基本用法

vue
<script setup>
const pager = 'top'
</script>

<template name="pager">
  <span>This is pager</span>
</template>

<template>
  <template v-if="pager === 'top'">
    <template is="pager" />
  </template>

  <span>Here is data table</span>

  <template v-if="pager === 'bottom'">
    <template is="pager" />
  </template>
</template>

已知的问题

  • TypeScript / Volar 支持尚未完成。