• 具名插槽的缩写

    具名插槽的缩写

    2.6.0 新增

    跟 v-on 和 v-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>
    6.   <p>A paragraph for the main content.</p>
    7.   <p>And another one.</p>
    9.   <template #footer>
    10.     <p>Here's some contact info</p>
    11.   </template>
    12. </base-layout>

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

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

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

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