[Vue @Component] Write Vue Functional Components Inline

最新推荐文章于 2025-03-18 21:48:11 发布

转载最新推荐文章于 2025-03-18 21:48:11 发布 · 155 阅读

文章标签：

#javascript #ViewUI

本文介绍如何在Vue中使用功能性组件，并展示了一个具体的示例：利用功能性组件在.vue文件内渲染多个图片元素。这种方式允许开发者结合使用JSX和Vue模板语法，从而实现对渲染内容的完全控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control over how to render your content.

Robot.vue:

<script>
export default {
    functional: true,
    render: (h, {props, data}) => {
        return props.names.map(
            name => `https://robohash.org/${name}?set=set${props.num}`
        ).map(
            url => <div><img src={url} alt="" /></div>
        );
    }
}
</script>

Using:

<template>
       <section slot="content" class="flex flex-row flex-no-wrap">
          <Robot :names="names" :num="2"></Robot>
        </section>
</template>

<script>
@Component({
  components: {
    Layout,
    Settings,
    Robot
  }
})
export default class HelloWorld extends Vue {
  @Prop({
    default: ["mindy", "john", "kim", "joel", "ben"]
  }) names
}
</script>