vue的template后面加个#然后加tags啥的,这种模板是自定义还是自带的,
如果是自定义的,那一般放在哪个文件夹里?
这是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自带的: