Components
April 18, 2019 at 11:05amComponents
April 18, 2019 at 11:05amHi 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
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
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 withimport
andcomponents
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 todata
but these are variables a component expects to receive from its parent. In this case it is said we expect a value formsg
to be passed, and we did pass it inApp.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 inApp.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
Awesome. Thank you. Indeed, there is no simple way to learn Components.