具名插槽的缩写

2.6.0 新增

v-onv-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

  1. <base-layout>
  2. <template #header>
  3. <h1>Here might be a page title</h1>
  4. </template>
  5. <p>A paragraph for the main content.</p>
  6. <p>And another one.</p>
  7. <template #footer>
  8. <p>Here's some contact info</p>
  9. </template>
  10. </base-layout>

然而,和其它指令一样,该缩写只在其有参数的时候才可用。这意味着以下语法是无效的:

  1. <!-- 这样会触发一个警告 -->
  2. <current-user #="{ user }">
  3. {{ user.firstName }}
  4. </current-user>

如果你希望使用缩写的话,你必须始终以明确插槽名取而代之:

  1. <current-user #default="{ user }">
  2. {{ user.firstName }}
  3. </current-user>