ComponentsApril 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
April 20, 2019 at 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
Button.vueis imported with
- Different values are passed into different instances of the Button component using custom attribute
<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.vuefile (open hamburger menu on the left top and find it in
- It has
<script>section. It is similar to
databut these are variables a component expects to receive from its parent. In this case it is said we expect a value for
msgto be passed, and we did pass it in
msgis used as a label for the button in
- event listener is added to the button and it emits (passes back to its parent) the event named
pressed, the one expected in
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