组件:插槽作用域
- 简述:可向插入的元素内传递包装好的局部变量,相当于模板内的实时计算属性,用以简化引用嵌套较深的属性,相较于 computed 计算属性更灵活。
- 使用场景:需要多次引用嵌套较深的属性,且变量可能是灵活多变或经处理的。
组件源码 (Vue2)
<script>
export default {
name: 'SlotScope',
functional: true,
inheritAttrs: false,
props: {
tag: { type: String, default: 'span' },
keep: { type: Boolean, default: true },
value: { default: void 0 },
slotNode: { default: void 0 }
},
render(h, { props, scopedSlots }) {
let slot = props.slotNode != null ? props.slotNode : scopedSlots.default
if (typeof slot == 'function') slot = slot(props.value)
if (slot == null) return
if (Array.isArray(slot)) {
if (slot.length == 0) return void 0
if (slot.length > 1) return h(props.tag, null, slot)
slot = slot[0]
}
if (typeof slot == 'string' || typeof slot == 'number') {
return h(props.tag, null, [slot])
} else if (typeof slot == 'object' && 'componentOptions' in slot) {
return props.keep && slot.tag ? slot : h(props.tag, null, [slot])
}
}
}
</script>
使用示例
<template>
<SlotScope :value="{
name: 'Demo',
odd: obj.a.b.filter(v => v % 2 == 1).join()
}">
<template #default="{ name, odd }">
<p>{{ name }}: {{ odd }}</p>
</template>
</SlotScope>
</template>
<script>
import SlotScope from '@/components/SlotScope'
export default {
components: { SlotScope },
data() {
return {
obj: {
a: {
b: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
}
}
}
}
</script>