【Vue实用组件】插槽作用域

组件：插槽作用域

• 简述：可向插入的元素内传递包装好的局部变量，相当于模板内的实时计算属性，用以简化引用嵌套较深的属性，相较于 computed 计算属性更灵活。
• 使用场景：需要多次引用嵌套较深的属性，且变量可能是灵活多变或经处理的。

组件源码 (Vue2)

<script>
/**
 *  插槽作用域
 *  @param  {String}    tag       包囊元素标签
 *  @param  {Boolean}   keep      是否直接输出插槽内的元素 (当元素为文本节点或无标签或循环输出时使用包囊标签嵌套)
 *  @param  {*}         value     插槽作用域映射值
 *  @param  {*}         slotNode  插槽元素
 */
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>