Vue3项目中slot插槽不起作用

954 阅读1分钟

问题:在子组件中定义一个具名插槽,在父组件中使用,但是内容并不能渲染出来。

原因:Vue在2.6.0,版本更新了有关插槽的大量内容,具名插槽和作用域插槽引入了一个新的语法v-slot来取代slotslot-scope这两个已废弃但未移除的属性。所以使用原来的写法内容不能被渲染出来。

修改:使用的每一个slot都需要一个 template 包裹,且 slot=“名称” 修改为 v-slot:名称

原来的写法:

//子组件
<template>
  <div class="tab-bar-item">
      <slot name="item-icon"></slot>
  </div>
</template>
 
//父组件
<tab-bar-item>
   <img slot="item-icon" src="../src/assets/img/tabbar/home.svg" alt="" />
</tab-bar-item>    

修改后的写法:

//父组件,子组件无需修改
<tab-bar-item>
  <template v-slot:item-icon>
    <img src="../src/assets/img/tabbar/home.svg" alt="" />
  </template>
</tab-bar-item>

来源链接:blog.csdn.net/qq_41988113…