vue2 如何透传 slots?

作者站长头像
站长
· 阅读数 13

了解到 v-bind="$attrs" v-on="$listeners"

分别可以透传 属性 和 事件

现在想知道 如何透传 slots?

包括 默认插槽 具名插槽 作用域插槽

举例 基于 element-ui

  • test.vue

<template>
    <mySelect>
        <div slot="empty">暂无数据</div> // 提供一个 empty 插槽
    </mySelect>
</template>
import mySelect from './mySelect.vue'
  • mySelect.vue

<template>
    <div>
        mySelect
        <el-select>
            ...slots // 这里需要把 test.vue 的插槽 透传给 el-select
        </el-select>
    <div>
</template>
回复
1个回答
avatar
test
2024-07-10
// app.vue
<template>
  <div>
    <Parent>
      <template slot="header" slot-scope="scope">
        <div>header - app {{ scope }}</div>
      </template>
      <div slot="body" slot-scope="scope">body - app {{ scope }}</div>
      <div slot="footer" slot-scope="scope">footer - app {{ scope }}</div>
      <div slot="append">append - app</div>
    </Parent>
  </div>
</template>

<script>
import Parent from './Parent.vue'
export default {
  name: 'app',
  components: {
    Parent
  }
}
</script>
// ChildA.vue
<template>
  <div>
    <h2>child</h2>
    <slot name="header" v-bind="row"></slot>
    <slot name="body" v-bind="row"></slot>
    <slot name="footer" v-bind="row"></slot>
    <slot name="append"></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildA',
  data () {
    return {
      row: {
        text: 'row内容'
      }
    }
  }
}
</script>
//Parent.vue
<template>
  <div>
    <h2>parent</h2>
    <Child>
      <template v-for="slot in Object.keys({...$scopedSlots, ...$slots})" :slot="slot" slot-scope="scope">
        <slot :name="slot" v-bind="scope"></slot>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './Child.vue'
export default {
  name: 'ParentA',
  components: {
    Child
  }
}
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容