Динамические компоненты, сверхдержава Vue.js

Если вы когда -либо встречали вкладки в своем коде, то, вероятно, есть одна из 3 вещей, которые были реализованы

• V-IF и V-ELSE
• Вложенные маршруты
• Динамические компоненты

Если вы когда -либо находитесь в ситуации, когда вы должны реализовать что -либо, что требует от вас условного показать один компонент за раз, если вы думаете об использовании V-if и v-else Затем, пожалуйста, рассмотрите возможность использования динамических компонентов.

Динамические компоненты, если используются хорошо, требуют меньшего кода в вашем шаблоне и более тонкий контроль над отображаемыми компонентами, в целом сохраняя условия из HTML и в ваш JavaScript, где его легче поддерживать.

Концепции лучше всего объясняются в коде, поэтому давайте начнем с приведенного ниже кода, который в основном является проектом, который иллюстрирует один из вариантов использования для динамических компонентов, код состоит из 4 компонента

• index.vue которая является просто оберткой для других компонентов
• Personal.vue который содержит форму для сбора личных данных
• Work.vue который содержит форму для сбора деталей работы
• Visionubmit.vue Для отображения собранных данных

Основной целью должно быть

• <компонент/>

Требуется одна опора, это Это просто имя компонента, который вы хотите отобразить в качестве строки, кроме этого ведет себя так же, как и любой другой пользовательский компонент, который вы создаете, он принимает пользовательские реквизиты, как любой другой компонент

Чтобы иметь возможность сохранить компонент в DOM со всеми его состояниями, вы можете обернуть его Keep-alive Это гарантирует, что если компонент переключается, все его данные хранятся так же, как есть.

Поэтому, если вы когда -нибудь задумывались, как разделить формы на несколько разделов, но все же сохраните свои данные, это один из способов сделать это.

//index.vue

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

//index.vue optional

Приведенный ниже код, это возврат реквизитов на основе показанного текущего компонента. Вы можете использовать этот метод, чтобы получить более тонкий контроль над вашим реквизитом

//computed value
 changePropsByComponent() {
      switch (this.currentComponent) {
        case 'Personal':
          return {
            savePersonalDetails: this.savePersonalDetails,
          }
        case 'Work':
          return {
            saveWorkDetails: this.saveWorkDetails,
            setCurrentComponent: this.setCurrentComponent,
          }
        case 'ViewSubmit':
          return {
            personal: this.personal,
            work: this.work,
          }

        default:
          return {}
      }
    },

//personal.vue

// Work.vue

// ViewSubmit.vue

Я надеюсь, что это поможет открыть несколько новых и интересных возможностей, GitHub для этого кода прикрепляется ниже

Спасибо. 😉

Reynoldadade/Dynamic-Components

Оригинал: “https://dev.to/reynoldadade/dynamic-components-a-vuejs-superpower-2olk”