Vue.js 2 Design Patterns and Best Practices

Named slots

We can also take this a step further with named slots. Let's say our message component wanted both a date and messageText input, one of which is a slot and the other a property of the component. Our use case for this would be that perhaps we want to display the date differently, add varying bits of information, or not even show it at all.

Our message component becomes:

<template> <div>  <slot name="date"></slot>  <h1>{{messageText}}</h1> </div></template><script>export default { props: ['messageText']}</script>

Take note of the name="date" attribute on our slot tag. This allows us to dynamically place our content at runtime in the correct locations. We can then build out a small chat system to show this in action, let's ensure we ...