[Vue @Component] Write Vue Functional Components Inline

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>

巴特西

[Vue @Component] Write Vue Functional Components Inline

最新文章

热门文章