Slots

When we're composing our components, we should consider how they'll be used by ourselves and our team. Using slots allows us to dynamically add elements to the component with varying behavior. Let's see this in action by making a new playground project:

# Create a new Vue project
$ vue init webpack-simple vue-slots

# Navigate to directory
$ cd vue-slots

# Install dependencies
$ npm install

# Run application
$ npm run dev

We can then go ahead and create a new component named Message (src/components/Message.vue). We can then add something specific to this component (such as the following h1) as well as a slot tag that we can use to inject content from elsewhere:

<template>
 <div>
   <h1>I'm part of the Message component!</h1>
   <slot></slot>
 </div>
</template>

<script>
export default {}
</script>

If we then registered our component inside of App.vue and placed it inside of our template, we'd be able to add content inside of...