Can't find anymore the schema "Props in, events out"

[Elfayer]

I used to share a lot a part of the documentation that contained the following schema to explain how props and events works. More specifically to explain how to design a component.:

But I can't fin it anymore, what happened?
Did I miss it?

[chipit24]

It looks like it was removed in the following PR as part of a refactor to break up the components page: #1482. It appears to exists in different versions of the documentation, see, for example, https://it.vuejs.org/v2/guide/components.html#Composing-Components.

The image you reference still exists in the repo here: https://github.com/vuejs/vuejs.org/blob/f247d173e81be3453da33ef36d819a65200d7005/src/images/props-events.png.

[chrisvfritz]

I removed it because when rewriting and reflecting on these pages, I felt it wasn't quite accurate. Really, it's more like:

• Props, attributes, slots down to direct descendants
• Provide/inject down to all descendants
• Events and slot scopes up to direct parents
• Vuex omnidirectional (up, down, and lateral)

I'd be open to adding a more accurate diagram that we could provide as a quick reference somewhere, thought it doesn't have to include Vuex. 🙂

[Elfayer]

Ok I understand now.

The thing is, for new comers, it was a very good starting point to understand component's design. They usually start by sending tones of data (objects), modify it directly in the child and not emitting anything. And they would complain about vue warning they should not mutate props. Usually at that point I like to remind them they are supposed to emit events.

I don't find anymore a section defining how a component should be designed, what are the options. That is a very important part for beginners. To know what's possible, what are the options when it comes to writing a component. I never complained about this schema only focusing on Props and Events, since it kept things simple. That's the core thinking you want new comers to understand: Components should be self sufficient and scoped.

Hope we can figure something out, maybe even better than what was here before. 😉

[chrisvfritz]

I'd be open to a series of diagrams that act as checkpoints for the components guide. That way, users can get visual summaries of what they've just learned without us implying that it's the full picture. Specifically, I'm thinking about versions of this diagram with:

1. Props down; events up
2. Props and slots down; events up
3. Props, slots, and attributes down; events up
4. Props, slots, and attributes down; slot scope and events up

If someone is willing to create these, I'll fit them in at the appropriate points in the docs. 🙂

[Elfayer]

I think that's great!

Just a few questions about the diagrams:

• What are the colors?
• What is the font?
• Any more details to comply to?
• Do you have something in mind? (mock-ups of these diagrams?)

[chrisvfritz]

What are the colors?

Any of the colors used in the lifecycle diagram can be used. I recommend using Sip or another color picker to pull those out.

What is the font?

Source Sans Pro

Any more details to comply to?

Nothing formalized, but please try to use similar patterns to the other diagrams we're using. For example, try to match the border radius and padding on boxes - that kind of thing.

Do you have something in mind? (mock-ups of these diagrams?)

Nothing in particular. 🙂 You can use your best judgment and creativity for the first drafts. If something doesn't quite work, we can do multiple iterations. I'm wondering if it might be best to start with the last diagram though (props, slots, and attributes down; slot scope and events up), as it might be easier to simplify a more complex diagram than the other way around. I could be wrong though. 😅

[phanan]

Closing due to inactivity.