vue 插槽,`slot`和 `slot-scope`已被废弃

在写项目用到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 直接用在组件上。

猜你喜欢

转载自blog.csdn.net/qq_40999917/article/details/129734505