Создавая компоненты с помощью Vue.js, вы можете пойти разными путями. Вы можете использовать подход, основанный на реквизитах, или можете выбрать решение на основе слотов.

Если вы используете реквизит, ситуация может быстро выйти из-под контроля, особенно когда вы имеете дело с большим количеством переменных и пользовательских параметров. Чтобы проиллюстрировать это, я создал 2 версии компонента aCustomButton. Один использует реквизит, другой - слоты.

Вот как выглядит компонент CustomButtonWithProps:

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

Вот как я использую этот компонент (в этом примере мы используем его непосредственно в App.vue)

Как видите, у нас есть плотно завернутый компонент в App.vue. И это почти все преимущества подхода к реквизиту.

Внутри самого компонента CustomButtonWithProps он начинает запутываться. У нас есть довольно большой компонент, который на самом деле довольно громоздкий. Мы просто можем сказать, что хотим показать, что это не значки. Но мы не можем изменить сам значок, не переписав компонент. То же самое и с цветом. Мы можем изменить цвет, но не можем изменить размер шрифта, оформление шрифта и т. Д.

Здесь мы рассмотрим подход к написанию компонента на Vue.js. Как вы увидите, таким образом мы можем создать гораздо более гибкий компонент.

Вот компонент CustomButtonWithSlots:

Здесь вы можете видеть, что компонент намного чище, чем компонент CustomButtonWithProps. Это потому, что нам не нужно передавать ему реквизиты. Каждую переменную, которую мы визуализируем, мы устанавливаем в нашем родительском компоненте. В этом случае снова наш App.vue:

Я начну с обратной стороны реализации CustomButtonWithSlots таким образом:

Ваш родительский компонент становится немного более раздутым. Но это все. Отсюда у нас есть только положительные стороны.

  1. Этот подход гораздо более гибкий: мы можем установить любой значок в обоих слотах, нам не нужно заранее определять какие-либо значки в нашем CustomButtonWithSlots компоненте. Что делает компонент более пригодным для повторного использования.
  2. Мы даже можем передать другие компоненты нашему CustomButtonWithSlots компоненту. Допустим, у нас есть компонент Image / Icon, который мы хотим использовать вместо значков FontAwesome, указанных выше. Затем мы просто передаем компонент в слот для значка.
  3. Вам не нужно иметь дело с предложениями if-else внутри компонента CustomButtonWithSlots. Вы либо передаете данные, либо нет. Нет необходимости проверять, есть он или нет.
  4. И последнее, но не менее важное: сам ваш компонент гораздо более читабелен и менее запутан.

Имейте в виду, что это довольно небольшой пример. Но чем больше становятся ваши компоненты, тем больше они сбивают с толку других людей.

Я не говорю, что реквизит никогда не имеет смысла, он здесь не просто так. Но для более крупных и гибких компонентов рекомендуется использовать прорези вместо опор.

Если вы пишете свои компоненты со слотами, вы даете себе и членам своей команды гораздо больше гибкости и кода, который легче читать.