Basic Props

VuedefineProps

<script setup lang="ts">
import Greeting from './Greeting.vue'
</script>

<template>
  <Greeting name="John" color="blue" />
</template>

// Greeting.vue
<script setup lang="ts">
const props = defineProps<{
  name: string
  color: string
}>()
</script>

<template>
  <h1 :style="{ color: props.color }">
    Hello, {{ props.name }}!
  </h1>
</template>

It receives props with defineProps inside the child component so they can be used in its logic or template.

Vue docs

Reactprops

function App() {
  return <Greeting name="John" color="blue" />
}

// Greeting.tsx
type GreetingProps = {
  name: string
  color: string
}

function Greeting({ name, color }: GreetingProps) {
  return <h1 style={{ color }}>Hello, {name}!</h1>
}

It receives props as child component arguments so they can be used in its logic or JSX.

React docs

Angularinput()

import { Component } from '@angular/core'
import { GreetingComponent } from './greeting.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GreetingComponent],
  template: `
    <app-greeting name="John" color="blue" />
  `,
})
export class AppComponent {}

// greeting.component.ts
import { Component, input } from '@angular/core'

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    <h1 [style.color]="color()">
      Hello, {{ name() }}!
    </h1>
  `,
})
export class GreetingComponent {
  name = input.required<string>()
  color = input.required<string>()
}

It declares reactive inputs with input() inside the child component so they can be used in its logic or template.

Angular docs