Vue: Функция: резервный контент для частичных файлов

Созданный на 11 апр. 2016  ·  3Комментарии  ·  Источник: vuejs/vue

Частичные файлы должны поддерживать резервный контент, как и слот. Это значительно улучшит читаемость шаблонов при их использовании определенным образом:
Существует базовый компонент с некоторой логикой (например, Dialog), из которого должны быть получены другие компоненты (например, PromptDialog), которые используют ту же логику и (внешний) шаблон. Это достигается за счет использования частичных файлов, аналогичных использованию слотов, но на компонентной основе, а не с экземплярами.
Такой шаблон будет выглядеть так:

<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>

Без этой функции мне нужно вынести содержимое всех частичных узлов за пределы шаблона - и это становится еще хуже с вложенными частичными файлами.
Подходя к решению проблем, используя базовый компонент в шаблоне производных - таким образом, наличие вложенных экземпляров нецелесообразно, потому что мне нужно было бы перенаправить большую часть данных / свойств и API из внешнего (псевдо-производного) во внутренний (базовый) экземпляр.

Самый полезный комментарий

Я бы сказал, что это злоупотребление частичными. Это плохая идея, потому что ваши частичные фрагменты исходят от родителя, но при этом осведомлены о контексте данных дочернего элемента. Это плотная развязка.

Компонент диалога не должен содержать никакого собственного состояния, потому что он чисто презентационный. Не передавайте состояние вниз. И состояние, и отображаемый контент должны принадлежать родительскому компоненту, который использует диалог.

Все 3 Комментарий

Извините, я не понял, почему использование слота вместо частичного - не вариант: sweat_smile:
Есть ли для этого причина?

При использовании слотов псевдо-производный _PromptDialog_ будет иметь следующий шаблон.

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

Для каждого атрибута _foo_ в исходном компоненте _Dialog_ мне нужно было бы иметь такой же атрибут во внешнем _PromptDialog_ и передавать его внутреннему. То же самое касается всех методов, определенных в _Dialog_: мне нужно определить прокси, которые передают вызов внутреннему. Это надоедает и опровергает идею наследования расширения / класса компонентов.

Я бы сказал, что это злоупотребление частичными. Это плохая идея, потому что ваши частичные фрагменты исходят от родителя, но при этом осведомлены о контексте данных дочернего элемента. Это плотная развязка.

Компонент диалога не должен содержать никакого собственного состояния, потому что он чисто презентационный. Не передавайте состояние вниз. И состояние, и отображаемый контент должны принадлежать родительскому компоненту, который использует диалог.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

franciscolourenco picture franciscolourenco  ·  3Комментарии

lmnsg picture lmnsg  ·  3Комментарии

bdedardel picture bdedardel  ·  3Комментарии

paceband picture paceband  ·  3Комментарии

seemsindie picture seemsindie  ·  3Комментарии