vue2 如何透传 slots?

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

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

回答：

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

以上是 vue2 如何透传 slots? 的全部内容， 来源链接： utcz.com/p/933605.html

回到顶部