frontendBaby
🇯🇵 日本語

Published

- 6 min read

Episode 12: The World of Emits and Slots

Vue Ponkichi Ponkichi and Vue Tech Light Novel

Ponkichi’s Vue.js Adventure: The Day His Life Changed at the Forest Doctor’s Lab

Note

This story was translated and written with the help of generative AI, aiming to make learning frontend technology enjoyable. Every effort has been made to ensure technical and translation accuracy, but we cannot guarantee that everything is absolutely perfect. Please treat this series as a friendly learning aid, and enjoy it with an open mind!

Characters

  • Dr. Frontend: The wise Frontend Doctor who lives in a laboratory deep in the forest. He knows everything about frontend technology and always answers Ponkichi’s innocent questions with kindness and humor.
  • Ponkichi: A curious young raccoon dog who dreams of becoming a frontend engineer. He has just started learning Vue.js and is fascinated by its depth. When he discovers something new, he can’t help but jump up with a cheerful “Boing!”

Episode 12🦝: The World of Emits and Slots

Having mastered the powerful magic of <script setup>, Ponkichi felt confident in building components. But his curiosity was endless.

Ponkichi: “Doctor! I understand how to pass data from parent to child with props. But what if I want to send something from child to parent?”

Dr. Frontend: “Excellent question, Ponkichi! That’s the first theme for today: ‘Emits.’ The child ‘emits’ an event, and the parent ‘listens’ to it. This is the basic way for children to communicate with parents in Vue.”

The doctor began writing an example where the child has a button and notifies the parent when it’s clicked.

// Child component: MyButton.vue
<script setup lang="ts">
// Use defineEmits to define the event and its type
const emit = defineEmits<{ (e: 'notify', message: string): void }>()

function handleClick() {
  // Emit the defined event
  emit('notify', 'Button was clicked!')
}
</script>

<template>
  <button @click="handleClick">Notify Button</button>
</template>
// Parent component: App.vue
<script setup lang="ts">
import MyButton from './MyButton.vue'

function handleNotification(message: string) {
  alert(message)
}
</script>

<template>
  <MyButton @notify="handleNotification" />
</template>

Ponkichi: “defineEmits! It’s a function with a name similar to defineProps! So here, you’re defining an event called ‘notify’ that sends a string message!”

Dr. Frontend: “Exactly! By defining the type with defineEmits, if you try to emit(‘notify’, 123) with the wrong type, TypeScript will strictly tell you ‘That’s the wrong type!’ This prevents communication mistakes between parent and child.”

Ponkichi: “I see! Communication from child to parent can be made safe with types too! Boing!”

Dr. Frontend: “Indeed. Now, let’s move on to the second theme: ‘Slots.’ This is the magic that dramatically increases component reusability.”

Ponkichi: “Slots…?”

Dr. Frontend: “For example, imagine you made a beautiful ‘Card’ component. But the content inside the card might be text sometimes, or an image at other times, depending on where it’s used. That’s when Slots come in handy.”

The doctor showed a generic card component.

// Child component: BaseCard.vue
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-content">
      <slot></slot> <!-- Default slot with no name -->
    </div>
  </div>
</template>

<style scoped>
.card { border: 1px solid #ccc; border-radius: 8px; padding: 16px; }
.card-header { font-weight: bold; }
</style>
// Parent component: App.vue
<BaseCard>
  <template #header>
    <h3>Ponkichi's Profile</h3>
  </template>

  <template #default>
    <p>I'm Ponkichi! My dream is to become a frontend engineer!</p>
  </template>
</BaseCard>

Ponkichi: “Amazing! The <slot> tag is like a placeholder for the content written in the parent component! This way, you can reuse the card skeleton and freely change the contents!”

Dr. Frontend: “Exactly! <slot> is a mechanism for creating flexible ‘insertion points’ in components. This allows you to separate layout from content, making component design much clearer and more reusable.”

Ponkichi felt as if he had obtained the three sacred treasures for mastering components: Props, Emits, and Slots.

Dr. Frontend: “Now, Ponkichi, you have learned almost all the basic magic of Vue and TypeScript. Only the final exam remains.”

Ponkichi: “Final exam…!?”

Dr. Frontend: “Indeed. Next time will be the grand finale. You’ll use all the knowledge you’ve gained to build a type-safe Vue application from scratch. If you can do that, you’ll be a true frontend engineer in the making.”

Ponkichi: “Yes! I’ll give it a try! Boing!”

Ponkichi’s heart was pounding with excitement and a little bit of nervousness.

🌟 Today’s Takeaways

  • Using defineEmits allows you to add types to events sent from child to parent, enabling safe communication.
  • <slot> is a placeholder tag for inserting external content into a component.
  • By using Slots, you can separate layout from content and create highly reusable components.
  • Props, Emits, and Slots are the three sacred treasures for flexible component design.

Next Episode Preview: “Doctor’s Graduation Certificate” [Final Episode]

The grand finale! Ponkichi will use all the knowledge he’s gained to build a type-safe Vue application. Will he be able to receive a graduation certificate from the doctor?

👨‍🏫 Doctor’s Note

Ponkichi was delighted to have obtained the three sacred treasures: Props, Emits, and Slots. But their true value lies not just in their functionality, but in the “philosophy of component design” behind them.

Before the final episode, let me talk a little about this philosophy.

🌊 The River of Unidirectional Data Flow

First, the important idea is that “data flows in one direction like a river”:

Grandparent Component ← Events (finally handled here)
　　↓ Props (data flows down)　↑ Events
Parent Component  ← Events (passes through here)
　　↓ Props (flows further)　↑ Events
Child Component ← Events (emitted from here)

This “Props down, Events up” golden rule is not just a rule. It’s wisdom for maintaining “predictability,” the lifeblood of large-scale applications.

⚖️ The Art of Appropriate Abstraction

With reusable component design using Slots, “appropriate abstraction” is key.

<!-- ❌ Over-abstracted: Can do anything, but unclear what the component is for -->
<SuperFlexibleComponent 
  :config="complexConfig" 
  :behaviors="allBehaviors" 
  :styles="everythingStyle" 
/>

<!-- ✅ Appropriate abstraction: Clear purpose, but still flexible -->
<UserCard>
  <template #avatar>
    <img :src="user.avatarUrl" />
  </template>
  <template #content>
    <h3>{{ user.name }}</h3>
    <p>{{ user.bio }}</p>
  </template>
</UserCard>

Too much abstraction is poison. “A component that can do anything” ends up being a component that you don’t know what it’s for.

🎯 The Beauty of Separation of Responsibilities

Finally, about “separation of responsibilities” in components. Each component should have a clear role:

  • Presentational Component: Focuses only on appearance (UI responsibility)
  • Container Component: Focuses on data management (logic responsibility)
  • Layout Component: Focuses only on arrangement (layout responsibility)
<!-- ✅ Clear responsibilities -->
<UserProfile>           <!-- Container: data management -->
  <ProfileLayout>       <!-- Layout: arrangement -->
    <UserAvatar />      <!-- Presentational: appearance -->
    <UserInfo />        <!-- Presentational: appearance -->
  </ProfileLayout>
</UserProfile>

End of Episode 12