问答

双层for循环中,slotscope中的变量未定义

作者:admin 2021-04-17 我要评论

组件中: @/components/Table.vue template div table thead tr td v-for="(item, index) in 5" :key="index" slot :name="'head' + index" :test="88"/slot /td ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

组件中:
@/components/Table.vue

<template>
  <div>
    <table>
      <thead>
        <tr>
          <td v-for="(item, index) in 5" :key="index">
            <slot :name="'head' + index" :test="88"></slot>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item1, index1) in 5" :key="index1">
          <td v-for="(item2, index2) in 5" :key="index2">
            <slot :name="'body' + index1 + index2" :test2="99"></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

页面中:
@/views/Home.vue

<template>
  <div class="home">
    <Table>
      <template
        v-for="(item, index) in 5"
        slot-scope="{ test }"
        :slot="'head' + index"
      >
        {{ test }}
      </template>
      <template v-for="(item1, index1) in 5">
        <template v-for="(item2, index2) in 5">
          <div
            :slot="'body' + index1 + index2"
            :key="index1 + index2"
            slot-scope="{ test2 }"
          >
            {{ test2 }}
          </div>
        </template>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from '@/components/Table.vue'

export default {
  name: 'Home',
  components: {
    Table
  }
}
</script>

想封装一个课程表组件,这个时候,每个课程表的格子实际上是地位是一样的,所有我才想用横向和纵向两层循环来实现。

结果thead中的test变量可以正常显示,tbody中的test2无法显示,多了一层for循环怎么显示不了了,请问下要怎么解决?
运行结果

###

没见过这种双层的写法。不过没必要这样写吧,参照官网示例

你应该只传入一个渲染,然后在组件内把所有元素都吐出来,渲染即可。在使用elementui的时候也没有使用过双循环呀。

  <div
    :slot="'body'"
    :key="index1 + index2"
    slot-scope="{ test2 }"
  > {{ test2 }} </div>

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器