使用iview的问题:在子组件中嵌套了table,父组件想利用<slot>传递内容给子组件的table

在子组件中嵌套了table,父组件想利用<slot>传递内容给子组件的table,但不起作用
请教下原因哈。
以下是大致的代码场景

子组件mytable:

<template>
  <div>

    <Table :columns="lists">
        <slot></slot>
    </Table>
   </div>

</template>
...js代码..
      lists: [
        {
          title: "xxxxx",
          key: "task_name",
          slot: "task_name",
        },
...js代码..

父组件调用子组件:

<mytable>
    <template slot-scope="{ row }" slot="task_name">
     <span>11111</span>  
    </template>
</matable>
阅读 2k
1 个回答

主要在第二部分传递插槽这里,但我只会用render实现。

<template>
    <div>
        <test1>
            <template v-slot>自定义default插槽位置</template>
            <template v-slot:test="{data}">自定义test插槽位置{{data.key}}</template>
        </test1>
    </div>
</template>
<script>
    import test1 from "./t1"
    export default {
        components: {
            test1
        }
    }
</script>
<script>
    import test from "./t2"
    export default {
        name: "t1",
        components: {
            test
        },
        render(h){
            return h(
                "test",
                {
                    scopedSlots: this.$scopedSlots
                }
            )
        }
    }
</script>
<template>
    <div>
        test插槽位置
        <slot name="test" v-bind:data="data"></slot>
        <br>
        default插槽位置
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: "test",
        data() {
            return {
                data: {
                    key: "val"
                }
            }
        }
    }
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题