Vue 如何遍历 $slots.default

Question

我想实现一个 Flex 组件，使用方式如下：

<flex>
    <div>Hello</div>
    <div>World</div>
</flex>

生成如下html结构：

<div class="flex">
    <div class="flex-item">
        <div>Hello</div>
    </div>
    <div class="flex-item">
        <div>World</div>
    </div>
</div>

新手，不太清楚自定义组件里如何遍历$slots.default？

Answer 1

Flex.vue

<script>
  export default {
    name: 'Flex',
    created() {
      console.log()
    },
    render() {
      const t = () => this.$slots.default.map(v => {
        return (
          <div class="flex-item">
            {v}
          </div>
        )
      })
      return (<div class="flex">
        {t()}
      </div>)
    }
  }
</script>

使用

    <Flex>
      <div>Hello</div>
      <div>World</div>
    </Flex>