Vue中<template #default>等#开头标识的作用及定义位置查询

标识的作用 #

你看到的#default、#content这类写法是Vue具名插槽的语法糖，#是指令v-slot的缩写，用于Vue组件的内容分发场景：
父组件调用子组件时，可以通过这类带插槽标识的<template>，把自定义内容传入子组件预先留好的对应插槽位置，实现组件的灵活定制。
三个写法的对应作用：

• #default 对应子组件的默认插槽，父组件没有指定插槽名的内容都会默认传入这个插槽
• #content、#close 对应子组件自定义命名的插槽，专门用来传入内容给子组件里名为content、close的预留位置

插槽的定义位置 #

这类插槽名确实支持自定义，定义在对应子组件的内部代码中：
找到你当前写带#标识<template>的位置，看它父级包裹的子组件是哪个，打开该子组件的源码，搜索<slot>标签即可找到定义：

• 没有加name属性的<slot>就是默认插槽，对应#default
• 带name="content"属性的<slot>对应#content，带name="close"属性的<slot>对应#close

子组件插槽定义示例：

<!-- 示例：自定义弹窗组件 src/components/CustomModal.vue -->
<template>
  <div class="modal-wrapper">
    <slot></slot> <!-- 对应#default -->
    <div class="modal-body">
      <slot name="content"></slot> <!-- 对应#content -->
    </div>
    <div class="modal-close">
      <slot name="close"></slot> <!-- 对应#close -->
    </div>
  </div>
</template>

插槽定义的存放路径 #

Vue没有强制规定插槽定义的独立存放路径，插槽定义完全跟随所属子组件的位置：

• 项目内自定义的组件，插槽定义就存放在src/components/目录下对应组件的.vue文件中
• 如果是第三方UI库提供的组件，插槽定义在UI库的组件源码内，一般直接查阅对应UI组件的开发文档即可获取所有支持的插槽列表，不需要手动翻阅源码

内容的提问来源于stack exchange，提问作者Mark