vue2 如何透传 slots?
了解到 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个回答
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>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容