[vue 具名插槽]在v-for渲染时,插槽无法正确识别内容导致显示异常

问题描述：

开发中，使用v-for渲染带插槽的组件，由于只有一个插槽，最初没有使用具名插槽，结果插槽却插入失败

插槽：

<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <!-- 主标题和副标题 -->
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <slot name="main"></slot>
    </div>
  </div>
</template>

虽然我写的是具名插槽，但是使用组件时不需要指定名字也可以成功渲染

但是当我使用v-for进行组件渲染时，插槽插入的内容就怎么也渲染不上了

  <div class="home-product">
    // v-for渲染
    <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      // 此处插槽的内容直接丢失了
      <div class="box">
        <RouterLink class="cover" to="/">
          <img :src="cate.picture" />
          <strong class="label">
            <span>{{ cate.name }}馆</span>
            <span>{{ cate.saleInfo }}</span>
          </strong>
        </RouterLink>
        <ul class="goods-list">
          <li v-for="good in cate.goods" :key="good.id">
            <RouterLink to="/" class="goods-item">
              <img :src="good.picture" alt="" />
              <p class="name ellipsis">{{ good.name }}</p>
              <p class="desc ellipsis">{{ good.desc }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </HomePanel>

原因可能是由于v-for渲染，出现了多个插槽，导致无法识别，所以渲染失效了

使用具名插槽语法成功解决问题

  <div class="home-product">
    <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
        // 此处添加具名插槽名字,问题解决
      <template v-slot:main>
        <div class="box">
          <RouterLink class="cover" to="/">
            <img :src="cate.picture" />
            <strong class="label">
              <span>{{ cate.name }}馆</span>
              <span>{{ cate.saleInfo }}</span>
            </strong>
          </RouterLink>
          <ul class="goods-list">
            <li v-for="good in cate.goods" :key="good.id">
              <RouterLink to="/" class="goods-item">
                <img :src="good.picture" alt="" />
                <p class="name ellipsis">{{ good.name }}</p>
                <p class="desc ellipsis">{{ good.desc }}</p>
                <p class="price">&yen;{{ good.price }}</p>
              </RouterLink>
            </li>
          </ul>
        </div>
      </template>
    </HomePanel>
  </div>

一个人可以走的很快，一群人才能走的更远， 编程这条路有苦有乐，可唯有坚持才是学好编程的必由之路。让我们一起出发，互相帮助，互相监督。如果你不够自律，总是坚持两天却又松懈。没有体会过披荆斩棘和实现目标的快乐和满足。加入我们吧，我们一同走得更远！

主要活动：学习交流群早起打卡，算法题练习打卡，项目讨论交流，精彩文章书籍分享，问题分享和解决，生活乐趣畅谈。

加入方式：添加微信加入学习群微信号了解更多：linlinzongzhong