vue2 如何透传 slots?

Question

了解到 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>

Answer 1

// 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>