Vue: Recurso: conteúdo substituto para parciais

Criado em 11 abr. 2016  ·  3Comentários  ·  Fonte: vuejs/vue

Partials devem oferecer suporte a conteúdo de fallback - assim como o slot. Isso melhoraria muito a legibilidade dos modelos ao usá-los de uma maneira específica:
Há um componente básico com alguma lógica (por exemplo, um Dialog), a partir do qual outros componentes (por exemplo, um PromptDialog) precisam ser derivados que compartilham a mesma lógica e modelo (externo). Isso é conseguido usando parciais semelhantes aos de slots - mas com base no componente e não com instâncias.
Esse modelo teria a seguinte aparência:

<div>
  <div class="header">
    <partial name="header">
      <i class="fa-whatever"></i>
      {{title}}
    </partial>
  </div>
  <div class="body">
    <partial name="body">
      {{{body}}}
    </partial>
  </div>
  <div class="footer">
    <partial name="footer">
      <!-- some stuff for button rendering -->
    </partial>
  </div>
</div>

Sem esse recurso, preciso colocar o conteúdo de todos os nós parciais fora do modelo - e fica pior com parciais aninhados.
Abordar os problemas usando o componente base no modelo dos derivados - portanto, ter instâncias aninhadas não é prático, porque eu precisaria redirecionar a maioria dos dados / props e API do externo (pseudo-derivados) para o interno instância (base).

Comentários muito úteis

Eu diria que está abusando de parciais. É uma má ideia fazer isso porque seus snippets parciais são do pai, embora estejam cientes do contexto de dados do filho. Este é um desacoplamento estreito.

O componente de diálogo não deve conter nenhum estado próprio porque é puramente de apresentação. Não passe o estado para baixo. Tanto o estado quanto o conteúdo exibido devem pertencer ao componente pai que usa a caixa de diálogo.

Todos 3 comentários

Desculpe, não entendi por que usar um slot em vez de parcial não é uma opção: sweat_smile:
Existe uma razão para isso?

Ao usar slots, um pseudo-derivado _PromptDialog_ teria o seguinte modelo.

<dialog
  :foo.sync="foo"
  >
  <input
    v-model="thePromptedValue"
    slot="body"
    >
</dialog>

Para cada atributo _foo_ no componente _Dialog_ original, eu precisaria ter o mesmo atributo no _PromptDialog_ externo e passá-lo para o interno. O mesmo vale para todos os métodos definidos em _Dialog_: eu preciso definir proxies que passam a chamada para o interno. Isso é incômodo e anula a ideia por trás da extensão de componente / herança de classe.

Eu diria que está abusando de parciais. É uma má ideia fazer isso porque seus snippets parciais são do pai, embora estejam cientes do contexto de dados do filho. Este é um desacoplamento estreito.

O componente de diálogo não deve conter nenhum estado próprio porque é puramente de apresentação. Não passe o estado para baixo. Tanto o estado quanto o conteúdo exibido devem pertencer ao componente pai que usa a caixa de diálogo.

Esta página foi útil?
0 / 5 - 0 avaliações