Component API ​
The Component API is the core building block of STX applications. This guide covers all aspects of component creation and lifecycle management.
Component Definition ​
Basic Component ​
typescript
export default {
name: 'MyComponent',
props: {
message: String,
count: {
type: Number,
default: 0
}
},
setup(props) {
// Component logic here
}
}Composition API ​
typescript
import { ref, computed } from 'stx'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
return {
count,
doubled
}
}
}Component Properties ​
Props ​
typescript
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise
}Computed Properties ​
typescript
const fullName = computed(() => {
return firstName.value + ' ' + lastName.value
})Methods ​
typescript
function increment() {
count.value++
}Lifecycle Hooks ​
typescript
import { onMounted, onUpdated, onUnmounted } from 'stx'
export default {
setup() {
onMounted(() => {
console.log('Component mounted')
})
onUpdated(() => {
console.log('Component updated')
})
onUnmounted(() => {
console.log('Component unmounted')
})
}
}Component Communication ​
Events ​
typescript
// Emitting events
const emit = defineEmits(['change', 'update'])
emit('change', newValue)
// Listening to events
<MyComponent @change="handleChange" />Provide/Inject ​
typescript
// In parent
provide('key', value)
// In child
const injectedValue = inject('key')Component Patterns ​
Composables ​
typescript
// useCounter.ts
export function useCounter() {
const count = ref(0)
const increment = () => count.value++
const decrement = () => count.value--
return {
count,
increment,
decrement
}
}
// Component usage
const { count, increment } = useCounter()Slots ​
typescript
<template>
<div class="container">
<slot>Default content</slot>
<slot name="footer"></slot>
</div>
</template>Best Practices ​
- Use TypeScript for better type safety
- Keep components focused and single-responsibility
- Use composables for reusable logic
- Properly type props and events
- Document component APIs
TypeScript Integration ​
typescript
interface Props {
message: string
count?: number
}
defineProps<Props>()