explore
Explore
door-enter
Log in
menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Mockupless

Design testable prototypes with code

link
https://mockupless.com/
Channels
# All channels
view-forward
# General
# Interactions basics
# Layout basics
# Show and tell
Team
And Gordy
@andgordy

Components

April 18, 2019 at 11:05am
Yellow Pancake
@no-refunds

Components

April 18, 2019 at 11:05am
Hi Andrew! Could you please share some useful links or articles how to learn and use components in Vue (Vue-CLI maybe too?) properly. Components looks little bit complex and not easy to learn for me. Thanks!
April 18, 2019 at 11:09am
11:09am
This subject is partially covered in VueMastery course, but they required to have at least some basic knowledge in JS — https://www.vuemastery.com/courses/intro-to-vue-js/components
April 20, 2019 at 2:41pm
Team
2:41pm
Hey, ! Components is a complex subject indeed. I do believe it’s a part of Vue CLI topic which deserves a course on its own. Since there’s no such course on Mockupless.com I personally recommend Maximilian’s Vue.js 2 course which covers the basics in An introduction to components and goes into details in Communicating between components sections.
To get a small preview of how components work feel free to take a look at this simple project: Simple component example
Look at the App.vue file:
  • Button.vue is imported with import and components container in <script> section.
  • Different values are passed into different instances of the Button component using custom attribute msg in the <template> section. You name these attributes yourself. You use them to pass data into a component.
  • Custom event listener is used to change the text. You name these events yourself, and you use them to listen to events emitted from the component.
Now open the Button.vue file (open hamburger menu on the left top and find it in components folder):
  • It has props container in <script> section. It is similar to data but these are variables a component expects to receive from its parent. In this case it is said we expect a value for msg to be passed, and we did pass it in App.vue
  • msg is used as a label for the button in <template> section
  • event listener is added to the button and it emits (passes back to its parent) the event named pressed, the one expected in App.vue.
Once again, the topic is complex. To use the components effectively, you need to learn how they work.
Hope this helps at least a bit 👐
April 22, 2019 at 4:54am
4:54am
Awesome. Thank you. Indeed, there is no simple way to learn Components.