Vue.js Components

export default { # Options API
    name: 'MyComponent',
    data() {
        return { count: 0 }
    }
}

import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        return { count }
    }
}

props: ['title', 'count'] # array syntax
props: {
    title: String, # type validation
    count: {
        type: Number,
        required: true,
        default: 0
    }
}

this.$emit('update', value); # Options API
const emit = defineEmits(['update']);
emit('update', value); # Composition API

<slot>Default content</slot> # default slot
<slot name="header"></slot> # named slot
<template #header>...</template> # use named slot

import MyComponent from './MyComponent.vue';
export default {
    components: { MyComponent } # local registration
}