Vue3项目中slot插槽不起作用（解决方法）

问题：在子组件中定义一个具名插槽，在父组件中使用，但是内容并不能渲染出来。原因：Vue在2.6.0,版本更新了有关插槽的大量内容,具名插槽和作用域插槽引入了一个新的语法v-slot来取代slot和slot-scope这两个已废弃但未移除的属性。所以使用原来的写法内容不能被渲染出来。修改：使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称原来的

慕千千Bebe

9901人浏览 · 2022-04-26 16:10:11

慕千千Bebe · 2022-04-26 16:10:11 发布

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

原因：Vue在2.6.0,版本更新了有关插槽的大量内容,具名插槽和作用域插槽引入了一个新的语法v-slot来取代slot和slot-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>

问题2：使用新的具名插槽之后，原来的img样式不能渲染在页面，而在外层的样式能被渲染

解决：在css样式中，在img名字前面加/deep/做样式穿透

/* 使用template包裹之后，原本的img样式无法被渲染（即深层的样式渲染不出来）
在不能渲染的地方添加一个/deep/就可以了 */
.tab-bar-item /deep/img {
  width: 24px;
  height: 24px;
  margin-top: 3px;

  /* 去掉图片与文字默认的间隔3px */
  vertical-align: middle;

  margin-bottom: 2px;
}