Vue
Each component lives in a single file, containing:
- its
template
(the DOM structure) - its
script
(includingprops
,data
andmethods
among other things) - its
style
(defining the look of the component)
Placed in the same folder are also:
- the test file (e.g.
MyComponent.spec.js
) - the storybook file (e.g.
MyComponent.story.js
)
Vue.js allows us to define component props either as strings or as objects (with
type
and default
or required
values). Always go for the second option!Also: only (and always!) define a
default
for props that are not required.Why?
- it makes our code more robust – a warning will be shown when passing a wrong prop type
- it clearly defines the component API and tells other developers how to use it
It is as easy as writing:
props: {
title: {
type: String,
required: true,
},
image: {
type: String,
default: 'human-connection-logo.png',
},
}
For better readability we prefer
:something
overv-bind:something
@click
overv-on:click
#slotSame
overv-slot:slotName
#default
overv-slot
Last modified 3yr ago