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

• Z时代
• 2024-02-23
• 分类：IT

在子组件中嵌套了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>

回答：

主要在第二部分传递插槽这里，但我只会用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>

以上是 使用iview的问题：在子组件中嵌套了table,父组件想利用&lt;slot&gt;传递内容给子组件的table 的全部内容， 来源链接： utcz.com/p/937431.html