在写项目用到slot时发现报错:
`slot` attributes are deprecated vue/no-deprecated-slot-attribute
经查阅资料得知,官方文档里的slot、slot-scope已经弃用
原来的使用方法:
<div class="content">
<slot name="contrite"></slot>
</div>
<h1 slot="contrite" class="title">内容</h1>
渲染结果:
<div class="content">
<h1 class="title">内容</h1>
</div>
现在的使用方法:
<div class="content">
<slot name="contrite"></slot>
</div>
<template v-slot:contrite>
内容
</template>
可简写为:
<template #contrite>
内容
</template>
渲染结果一致
注意:v-slot 只能添加在一个 <template> 上 (只有一种例外情况),这一点和已经废弃的 slot特性不同。
例外情况: 当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上。