Vue.js 2 Design Patterns and Best Practices

Components and props

Let's create ourselves a ListItem component under components/ListItem.vue with one prop, name. We'll render this component in place of our li and map over an array that contains various names. Notice how we're also adding the functional: true option to our Vue instance; this tells Vue that this is purely a presentational component and it will not have any state of its own:

<script>export default { props: ['name'], functional: true}</script>

With our render function, h is often also referred to as createElement, and because we're in the JavaScript context, we're able to take advantage of array operators such as map, filter, reduce, and so on. Let's replace the static names for dynamically generated components with map ...