Componentes com propriedades ou slots?

[kvnol]

O que vocês preferem e o que é o mais indicado na criação de componentes, usar propriedades por exemplo:

<component [item]="item"></component>

ou usando slots:

<component>
  <img image [src]="item.image.url">
  <span title>{{ item.title }}</span>
</component>

O que vocês preferem?

[felquis]

@kvnol me tira essa dúvida

Essa syntax usando atributos como [item] e [src] é algo de alguma lib ou é HTML nativo?
Também os slots que vc está falando, é de alguma lib ou é os slots do HTML nativo?

[kvnol]

@felquis sim, nesse caso o exemplo eu escrevi em Angular, mas em Vue também existe essa abordagem. Um pessoal me falou que em React existe como children também, mas aí não conheço.

[felquis]

• https://vuejs.org/guide/components/slots.html

Tem algum link sobre slots no Angular que seja doc/guide oficial?

[kvnol]

@felquis no angular se chama ng-content: https://angular.io/guide/content-projection

[felquis]

Minha opinião: No mundo React/Angular de forma geral prefiro definir propriedades do componente.

E children, fica mais "independente". Só usei slots no contexto do HTML nativo, estudando a API.

👍

[kvnol]

@felquis saquei, é como trabalho também, com propriedades.

[gstcarv]

No React eu geralmente defino isso de acordo com o nível de abstração do componente. Se for um componente mais focado em renderização de dados separação de código e mais focado em uma funcionalidade, eu passo por props, já se for um componente mais genérico, é mais comum usar o children pra passar os componentes de dentro + as props pra definir as configurações do componente.

Exemplos:

<UserInfo user={user} />

<ProductCard product={product} />

<Button>button-text</Button>

<BeautifulCard isDark>
    <Text>nested text</Text>
    <MyNestedComponent />
</BeautifulCard>

[didiraja]

separo assim, tbm