Basic usage examples of Vue named slots

<div>
 <myslot>I just now</myslot>
</div>

<div>
 <slot><slot>
</div>

<div>
 <myslot>
  <template #one>Piggy is a big fat cat</template>
  <template #two>They are all big assholes</template>
  <template #three>Mimi is a heartless little bastard</template>
  I just now
</div>

<div>
 <slot name="one"></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<div>
	<myslot>
		<template #oneData="oneData">
			<div>{{oneData.one.message}}</div>
		</template>
		<template #two>They are all big assholes</template>
		<template #three>Mimi is a heartless little bastard</template>
		I just </myslot>
</div>

<div>
 <slot name="one" :data='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: 'This is the data message of the subcomponent',
       },
   };
  },
 }
</script>

<div>
 <myslot>
  <template #oneData="{oneData}">
   <div>{{oneData.message}}</div>
  </template>
  <template #two>They are all big assholes</template>
  <template #three>Mimi is a heartless little bastard</template>
  I just now
</div>

<div>
 <slot name="one" :oneData='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: 'This is the data message of the subcomponent',
       },
   };
  },
 }
</script>