[JavaScript知识库]具名插槽的缩写

具名插槽的非缩写的实现方式 可参考博客 vue插槽上篇

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

<component-slot-more>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</component-slot-more>

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

<!-- 这样会触发一个警告 -->
<component-slot-more #="{ user }">
  {{ user.firstName }}
</component-slot-more>

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

<component-slot-more #default="{ user }">
  {{ user.firstName }}
</component-slot-more>