Vue
Wir haben unsere Småland-Komponente die alle Kinder im Bälleparadies enthält. Möchte ein Kind nicht mehr mit und in Bällem schwimmen oder davor stehen, ins Bällebad zu pinkeln, können wir die Eltern bei ihrer KROKANTTÅRTA stören und über unsere ChildrenList ausrufen.
// Småland.vue
<script setup lang="ts">
import Child from './Child'
const children: string[] = ['Maria', 'Emma', 'Erik', 'Elias']
const onCallParents = (name) => {
alert(`Die/der kleine ${name} möchte aus dem Småland abgeholt werden.`)
}
</script>
<template>
<h1>Kinder im Småland</h1>
<div class="gap-4">
<Child :names="children" @callParents="onCallParents>
Eltern von { name } ausrufen
</Child>
</div>
</template>
// Child.vue
<script setup lang="ts">
const emit = defineEmits(['call-parents'])
const props = defineProps({
names: string[]
})
</script>
<template>
<button v-for="[child, index] in children" :key="index" @click="emit('call-parents', name)">
{{ name }} möchte abgeholt werden
</button>
</template>
React Functional Components
React kennt von Hause aus keine Emits und löst das ganze über die Properties der Child-Komponente.
// Children.tsx
interface ChildrenProps {
names: string[]
onCallParents: (name: string) => void
}
export const Children: React.FC<ChildrenProps> = ({ onCallParents, names, ...props }) => {
return (
<div>
{names.map(name, index) => (
<button onClick={onCallParents(name)}>{name}</button>
))}
</div>
)
}
// Småland.tsx
import Children from './Children'
export const Småland: React.FC<SmålandProps> = () => {
const handleCall = (name: string) => {
alert(`Die/der kleine ${name} möchte aus dem Småland abgeholt werden.`)
}
return (
<Children names={['Maria', 'Emma', 'Erik', 'Elias']} onCallParents={handleCall}
)
}
Dieser Artikel ist Teil der Serie Von Vue.js zu ReactJS (V2R)