Component Communication

Welcome to Enjoy the Vue! Today, our topic is all about Components Communication. We will be discussing common situations, questions, and issues that we have encountered. Some topics include props down events up, props and callbacks, v-bind attrs, $attrs object, v-tool tip component, .native, and EventBus. Also, what is “The Prop Train Pattern?” Download this episode now to find out!

Outline

[00:01:32] Tessa heard in the Vue world, the pattern that you want to follow is props down events up, but a lot of pieces are a bit vague when it comes to abstractions. Tessa wants to learn more about the specific mechanics behind the approach versus something else like passing callbacks? Chris gives his thoughts on this.

[00:07:53] Chris explains what .native does. He also gives some great recommendations. ☺

[00:10:36] Tessa wants Chris to expand more on what problems he has seen people trying to solve with .native.

[00:13:40] Chris recommends some ways for communicating how a component is intended to be used in a way that’s more in keeping with props down events up versus passing callbacks.

[00:16:43] V-bind attrs is explained as well as $attrs object. And Ben talks about concerns when people are justifying desire to document the callbacks.

[00:19:55] Tessa explains an issue with passing down data you need via props and trying to build some kind of structure around that communication. Also, having several series of several generations of components and how does she get around this issue. Chris clarifies and Ben names it “The Prop Train Pattern.” Ari tells us what she does.

[00:24:55] Chris talks about using Guillaume’s excellent v-tool tip component.

[00:26:03] Tessa goes back to Chris’s example of Font Awesome and wants to confirm if she has some grandparent that has the Font Awesome data, then it’s going through a couple of other component layers to get to the icon component layer, can she just put v-bind attrs on the icon component or does she have to put that on every component in between as well? Chris explains.

[00:30:01] Ben asks Chris to speak a little bit about the caveats when it comes to the reactivity part of refactoring everything to reply and inject.

[00:33:24] Ben talks about one of the drawbacks of provide/inject. Chris shares some good naming tips and patterns that help developers when they’re looking at components.

[00:48:00] Tessa brings up the EventBus and if anyone has any thoughts or experiences with it.

Resources mentioned

• Vue enterprise boilerplate
• v-tooltip
• “Provide/Inject Have Nothing to Do With Dependency Injection” by Michael Thiessen
• Vue Style Guide: Order of words in component names
• Vue Patterns
• EventBus