Pasar Contenido a un Componente Hijo

Vueslot

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

<template>
  <CardBox>
    Hello from the parent
  </CardBox>
</template>

// CardBox.vue
<template>
  <section>
    <slot />
  </section>
</template>

Usa slots para permitir que el componente hijo renderice contenido recibido desde el padre en una posición concreta del template.

Vue docs

Reactchildren

function App() {
  return (
    <CardBox>
      Hello from the parent
    </CardBox>
  )
}

// CardBox.tsx
type CardBoxProps = {
  children: React.ReactNode
}

function CardBox({ children }: CardBoxProps) {
  return <section>{children}</section>
}

Usa la prop especial children para que el componente hijo renderice contenido anidado enviado por el padre.

React docs

Angularng-content

import { Component } from '@angular/core'
import { CardBoxComponent } from './card-box.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardBoxComponent],
  template: `
    <app-card-box>
      Hello from the parent
    </app-card-box>
  `,
})
export class AppComponent {}

// card-box.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-card-box',
  standalone: true,
  template: `
    <section>
      <ng-content />
    </section>
  `,
})
export class CardBoxComponent {}

Usa ng-content para proyectar dentro del componente hijo el contenido que se declara entre sus etiquetas desde el padre.

Angular docs