Vue

Vue (or VueJS) is a progressive web framework for building web applications or enhancing existing html websites. I enjoy the design and layout of how Vue is structured, especially with the new composition API.

You can have decision fatigue with javascript frameworks, I did. I quite like the Vue documentation and straight forward approach to problems. It also seems to get better adapting new features under the hood (for Vue 3+) to increase productivity.

Nomenclature

In Vue – as with any framework – how yo communicate with components is key. Here is my notes on how to communicate with components

Sending data to a child component from a parent component

You access this by sending props to the component, where the component defines them as a list, or object from defineProps(...). Using the v-bind:propName or the shortcut :propName can be accessed to pass data to the child.

Receiving data from a child component

Receiving data is used by sending a signal or emitting a signal. In Vue, you can define these with defineEmits. This gives you a handle to emit on child components by some interactivity. Typically you access emits with v-on:emitName or the shorthand @emitName. Below is an example,

// Child
<script setup>
const value = 1
const emit = define(['child-emit'])

const sendOne = (event) => {
    console.log("Child sending value", value)
    emit('child-event', value)
}
</script>

<template>
    <button @click="sendOne">OK</button>
</template>

// Parent
<script setup>
import { Child } from `@/components/Child.vue`

const handleEmit = (event) => {
    console.log("Response from child handle", event)
}
</script>

<template>
    <Child @child-emit="handleEmit()" />
</template>

Two-way data binding

© 2017–2024 David Kalliecharan