vue的template后面加个#然后加tags啥的,这种模板是自定义还是自带的

vue的template后面加个#然后加tags啥的,这种模板是自定义还是自带的,
如果是自定义的,那一般放在哪个文件夹里?

img

这是vue自带的具名插槽语法。vue中有三种插槽类型:默认插槽、具名插槽和作用域插槽。

1、默认插槽
当你在组件中声明了一个 <slot></slot>,即声明了一个默认插槽。以图片中的组件为例,当你在 van-cell 组件中加入了 HTML 元素,则默认将该段HTML插入到 <slot> 的指定位置中

<van-cell>
  <span>...</span>
</van-cell>

2、具名插槽
当组件中声明了多个 <slot> 时,就需要通过名称来指定,举个坐动车的例子,你买了动车票,就需要按照票上的座位坐。但如果你买的动车票上没座位,你就不知道坐哪里。同理,当有多个 slot 时,vue 无法识别出来你要往哪里坐,因此需要指定名称。
在组件中,以 title 作为名称,声明 slot 的语法如下

<slot name="title"></slot>

在使用组件时,有两种方式可以指定名称
写法1:使用 slot。vue 官方文档指出尽管此写法可用,但即将废弃,不推荐用。

<van-cell>
    <span slot="title"></span>
</van-cell>

写法2:使用 v-slot,但只能在 template 标签上使用。vue 推荐使用的语法。

<van-cell>
    <template v-slot:title>
          <span></span>
    </template>
</van-cell>

而 v-slot 的简写形式,就是题主开头所说的 #,如下代码

<van-cell>
    <template #title>
          <span></span>
    </template>
</van-cell>

至此应该能让你对此有所理解,如果你还有前端相关问题,随时欢迎与我交流!
最近正在编写vue查漏补缺系列文章,后续也会专门更新一篇关于插槽的文章,欢迎持续关注呀~

具名插槽的简写吧好像是,好久没看文档了,记不清了

vue自带的:

img