#14 Learning the Vue basics 3

A quick recap of some of the things I've learned.

I now use the Vue CLI and components.

• Used .Vue files for the first time

• Downloaded the Vetur VSCode extension

Components:

Apps & Components

Components are like mini-apps, but they can communicate with each other, unlike apps that can’t communicate with other apps.

Props

• Communication between components

• Props are short for Properties

• You can think of props like custom HTML attributes

the props property = in your component file, add this property to the config object. In the props property: specify all the props you want to accept on your component. Also, specify the type of those props (e.g. string)

props: use camelCase in js (Vue config object)

Vue will automatically translate your props into kebab-case in your HTML template

Unidirectional data flow

props typically should not be mutated, instead, change the data you pass through to your component. Or you could also take the received data as the initial data and then change the data in your component, but make sure you are still aware of the fact that you only change it there, and not outside your component.

in your data(): valueThatMayMutate = this.propValue

prop types

props: { prop: String } basic prop type

But… you can do even more! By Making the prop value an object

props: {prop: { type:String, required: false, default: “defaultPropValue”} } (you can also add a validator function)

https://v3.vuejs.org/guide/component-props.html#prop-types

Question: what's up with strings and numbers/booleans in Vue? Can I pass a number?

=> YES, use v-bind!

Emitting custom events (child to parent communication)

$emit() allows you to emit your own custom event to which you then can listen from inside the parent component. It should have at least one argument: the name of the custom event.

• in child component: $emit(“event”)

• in object config this.$emit(“event”)

• or in template with @click=”$emit(‘event’, optionalPropYouWantToPass)”

• in parent component (inside child component tag)

• @event=”whatToDoOnEvent”

Component communication

components are used to build UIs by combing them components build “parent-child” relations and use unidirectional data flow for communication

For passing data down: Props

• Props (parent => child)

• “Props” are used to pass data from a parent to a child component Props should be defined in advance, possible in great detail (type, required, etc..)

From child to parent: Custom Events

• Custom events are emitted (via $emit) by a child component custom events can carry data which can be used in the call method

• You don’t have sibling communication: if you have neighbors who need to pass data between each other, use their common parent component.

• If data needs to be passed between multiple components => Provide-Inject provide data in a parent component, inject it into a child component

Local vs Global components

• Local

• Global

Scoped styles

<style scoped> to keep css limit css to a component

Props vs slots

v-if="$slots.slotName"  v-slot / #slotName        

dynamic components:

instead of v-if on all your components, use:

<component :is=""></component>

By default: components will be destroyed when you stop rendering them. This can be a problem when you have an unsaved input form and go back to another component. The input will be lost.

Use the keep-alive component in that case:

<keep-alive>
<component :is=""></component>
</keep-alive

Vue teleport

<teleport to="cssSelectorSelectingAnHTMLElement">

So it will be rendered somewhere else in the DOM structure.

Useful for dialog(MODALS), semantics.

These are just some notes I've made, for more details, check the official Vue documentation.