Episode 55: What is Vue 3’s Emit Component Option? With Alex Riviere
Today we welcome back returning special guest, Alex Riviere, to celebrate and explain some of Vue 3’s epic new functionality. This episode’s spotlight shines specifically on Vue 3’s new emit option, with Alex and our panel sharing its most pertinent details. To kick things off, Alex contrasts between callbacks and promises. Here, he touches on the pretense of a callback function and walks listeners through the steps one would take when using it. After describing the results of a callback, Alex then explains some of Vue 3’s emit option offerings, and touches on component APIs, script tags, and template layout. As Alex expects this to become a game-changer for editors and developers, we then dive into the topic of passing on props. Alex offers his hot take on the matter, which involves Vuetify and its validation function. Before we move onto this week’s picks, we finally explore how emit is evoked in Vue 2, along with a few more changes that have come with Vue 3. Tune in today and enjoy the vue!
Key Points From This Episode:
- Introducing today’s returning guest, Alex Riviere.
- Today we ask: what is Vue 3’s emits component option?
- What it means to pass a callback function as a prop.
- Alex contrasts callbacks and promises.
- The best way to consider what a callback is.
- New offerings that come with Vue 3’s emits option.
- Why emits options will be useful to editors and developers.
- Alex tells us when and where you can find perfect conditions for passing on props.
- Some limitations that come with the emits option.
- How emit is evoked in Vue 2 versus and the changes that have come with Vue 3.
- Stay tuned for this week’s top picks.
Tweetables:
- “My understanding is that emitting in Vue is the way that you pass data from a child component to its parent. It allows you to create your own events and you can use it wherever you want to, in a component to emit some data backup to its parent.” — @fimion [0:03:23]
- “I think, it may also be that you don't necessarily need the information directly from callbacks, but you need that information available for something else that would happen.” — @fimion [0:14:56]
- “If you're looking at a Vue like a page, where all you care about is what the template layout of it is, I feel that's more important to be at the top than the script.” — @fimion [0:18:40]
- “Since emit does not return a value, you can't actually run validations through emit.” — @fimion [0:33:12]
Resources mentioned:
- Enjoy the Vue on Twitter
- Enjoy the Vue
- Alex Riviere on Twitter
- Alex Riviere on GitHub
- Alex Riviere on CodePen
- Alex Riviere Blog
- Anthony Alicea
- Ionic
- Vue 2 docs - Emitting a Value With an Event
- Vue 3 docs - Component Custom Events
- Learn and Understand NodeJS, Anthony Alicea (Udemy)
- In The Loop, Jake Archibald (JSConf.Asia)
- Tony and Chelsea Northrup
- Mediocre: The Dangerous Legacy of White Male America, Ijeoma Oluo
- Fire Emblem: Three Houses - Cindered Shadows DLC (Nintendo Switch)
- Mutual Aid Hub
- Manhunt Deadly Games
- Street Food Asia
- Obsidian