Vue Macros

简体中文

English

简体中文

English

外观

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>
<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 支持尚未完成。