👉 Похожие статьи

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

✨ Быстрый старт

Использовать динамические компоненты очень просто, нам просто нужно использовать тег <component> в нашем шаблоне и указать компонент для визуализации, установив атрибут is компонента. Например:

<component :is="currentComponent"></component>

currentComponent в этом примере кода — это переменная, которая может иметь следующие 2 значения:

  • Имя зарегистрированного компонента или имя тега HTML
  • Импортированный объект компонента

Вы можете лучше понять это, взглянув на это изображение:

🚀 Где использовать

Гибкое использование функций динамических компонентов Vue3 может помочь нам удовлетворить потребности в динамичности и гибкости, и они чаще используются в следующих местах:

  1. Условная визуализация

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

2. Динамические формы

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

3. Модальные окна и всплывающие окна

Используйте динамические компоненты для реализации модальных окон и всплывающих окон для динамической загрузки соответствующего контента на основе условий срабатывания или действий пользователя.

4. Повторное использование и расширение компонентов

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

5. Переключение вида маршрута

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

6. Выбор настраиваемого компонента

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

🎬 Примеры использования

Здесь я помогу вам лучше понять использование динамических компонентов Vue3 с помощью 5 примеров использования:

1. Динамическое переключение компонентов

Когда нам нужно визуализировать разные компоненты на основе разных условий. В этом случае мы можем использовать директивы v-if и v-else для достижения условного рендеринга. Например:

<component v-if="showComponentA" :is="'ComponentA'"></component>
<component v-else :is="'ComponentB'"></component>

<!-- Code Simplification -->
<component :is="showComponentA ? 'ComponentA' : 'ComponentB'"></component>

В этом примере решение об отображении <ComponentA> или <ComponentB> основано на значении showComponentA.

2. Эффекты перехода для динамических компонентов

Чтобы сделать динамические переходы компонентов более плавными, мы можем добавить эффекты перехода (включая анимацию перехода при входе и выходе). Мы можем использовать встроенный компонент Vue [<transition>](https://vuejs.org/guide/built-ins/transition.html) и имя класса перехода для реализации эффекта перехода.

<template>
  <div>
    <transition name="fade">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>

В этом примере, указав имя класса перехода с именем атрибута name 'fade' для компонента <transition>, мы можем определить эффект перехода, соответствующий этому имени в CSS, добавив эффект постепенного появления и исчезновения и продолжительность перехода к динамическая составляющая. Анимация компонента <transition> может быть запущена любым из следующих условий:

  • Переход, вызванный v-if
  • Переходы, вызванные v-show
  • Динамические компоненты переключаются специальным элементом <component>
  • Изменение специального атрибута key

3. Передача данных между динамическими компонентами

Передача данных между родительским компонентом и динамическим компонентом также очень проста. Родительский компонент может передавать данные динамическому компоненту с помощью директивы v-bind, например:

<component :is="currentComponent" :prop1="value1" :prop2="value2"></component>

В этом примере данные value1 и value2 передаются компоненту currentComponent через :prop1="value1" :prop2="value2". В динамическом компоненте мы можем использовать defineProps для получения этих данных, используя <script setup> в качестве примера:

<script setup lang="ts">
  const props = defineProps<{
    prop1: string;
    prop2: string;
  }>();
</script>

4. Использование объектов компонентов в качестве параметров свойства is

В реальном бизнесе нам может понадобиться отображать различные компоненты формы в соответствии с различными параметрами, выбранными пользователем. Например, пользователь может выбрать тип регистрации (личная или деловая), а затем нам нужно отобразить соответствующий компонент формы. Нам нужно связать различные типы страниц с компонентами, определив объект pages.

<script setup lang="ts">
import { ref, type Component } from "vue";
import Company from "./Company.vue";
import Personal from "./Personal.vue";

const pages: Record<string, Component> = {
  company: Company,
  personal: Personal,
};
const currentPage = ref<Component>(pages.company);
const changePage = (page: string) => {
  currentPage.value = pages[page];
};
</script>

<template>
  <h3><a @click.stop="changePage('company')">Company</a></h3>
  <h3><a @click.stop="changePage('personal')">Personal</a></h3>
  <div style="border: 1px solid #000">
    <h2>From Content:</h2>
    <component :is="currentPage"></component>
  </div>
</template>

В этом примере кода <component :is="currentPage"></component> отображает компонент, изменяя currentPage при переключении страниц, так что компонент переключается, а пользователь переключается на отображение другой формы, щелкая Company или Personal внизу.

5. Использование имени компонента в качестве параметра свойства is

Нам нужно зарегистрировать компонент, который мы хотим использовать глобально, а затем использовать имя компонента в <component :is="currentPage"></component>. Сначала зарегистрируйте компонент глобально в main.ts с помощью app.component(component name, component object), и глобально зарегистрированный компонент можно будет использовать непосредственно в любом шаблоне компонента: app.component(component name, component object):

// main.ts
import { createApp } from "vue";
import Company from "./components/Company.vue";
import Personal from "./components/Personal.vue";

import App from "./App.vue";
const app = createApp(App);
app.component("demo-company", Company);
app.component("demo-personal", Personal);
app.mount("#app");

Затем просто используйте компонент на странице, который должен использовать динамический компонент:

<script setup lang="ts">
import { ref } from "vue";

const currentPage = ref<string>("demo-company");
const changePage = (page: string) => {
  currentPage.value = page;
};
</script>
<template>
  <h3><a @click.stop="changePage('demo-company')">Company</a></h3>
  <h3><a @click.stop="changePage('demo-personal')">Personal</a></h3>
  <div style="border: 1px solid #000">
    <h2>Content:</h2>
    <component :is="currentPage"></component>
  </div>
</template>

❓ Часто задаваемые вопросы

Давайте изучим пример кода и решения 5 распространенных проблем при использовании динамических компонентов Vue3, используя синтаксис <script setup> и TypeScript для демонстрации:

1. Динамическое обновление имен компонентов

<script setup lang="ts">
import { ref } from "vue";
const currentPage = ref<string>("demo-company");
const changePage = (page: string) => {
  currentPage.value = page;
};
</script>
<template>
  <h3><a @click.stop="changePage('demo-company')">Company</a></h3>
  <h3><a @click.stop="changePage('demo-personal')">Personal</a></h3>
  <div style="border: 1px solid #000">
    <h2>Content:</h2>
    <component :is="currentPage"></component>
  </div>
</template>

В этом примере ref используется для создания ответных данных currentPage, а значение по умолчанию — 'demo-company'. Когда вызывается метод changePage() для обновления имени компонента до соответствующего имени компонента, Vue автоматически уничтожает старый экземпляр компонента и создает новый.

2. Уничтожение компонентов и кэширование

<template>
  <keep-alive>
    <component :is="componentName"></component>
  </keep-alive>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  const componentName = ref("ComponentA");
</script>

Поскольку переключаемый компонент будет уничтожен при переключении компонента, вы можете использовать встроенный компонент Vue [<keep-alive>](https://vuejs.org/guide/built-ins/keep-alive.html) для переноса динамических компонентов, чтобы добиться кэширования компонентов и избежать повторного создания и уничтожения.

3. Связь между компонентами

<template>
  <div>
    <component
      :is="componentName"
      :data="componentData"
      @event="handleEvent"
    ></component>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from "vue";
  const componentName = ref("ComponentA");
  const componentData = reactive({});
  const handleEvent = (data: any) => {
    // Handle events triggered from Dynamic Components
  };
</script>

Взаимодействуйте между динамическими компонентами и родительскими компонентами, передавая data свойств и прослушивая event событий. Используйте объект-оболочку reactive componentData, чтобы сделать его отзывчивым.

4. Асинхронная загрузка компонентов

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

<template>
  <div>
    <component :is="componentName" v-if="componentLoaded"></component>
    <div v-else>Loading...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const componentName = ref(null);
const componentLoaded = ref(false);
onMounted(async () => {
  // Asynchronous loading of components
  const module = await import("./ComponentA.vue");
  componentName.value = module.default;
  componentLoaded.value = true;
});
</script>

Загружайте компоненты асинхронно через import и визуализируйте их после загрузки. Используйте ref для создания адаптивных данных componentName и componentLoaded.

5. Убедитесь, что соответствующие глобальные компоненты зарегистрированы

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

// main.ts
// Omit other codes
// need to register first
app.component("demo-company", Company);
app.component("demo-personal", Personal);

app.mount("#app");

Компоненты 'demo-company' и 'demo-personal' глобально регистрируются через файл записи mian.ts.

🔍 Резюме

Динамический компонент — очень важный тип компонента в Vue, он позволяет нам гибко отображать различные компоненты в разных сценариях. Я полагаю, что после введения в эту статью вы освоили основные концепции, использование, условный рендеринг, эффекты перехода и передачу данных динамических компонентов.

📚 Учебные ресурсы

Если вы хотите подробно изучить Vue3, вы можете обратиться к следующим учебным ресурсам:

Если вам нравится изучать JavaScript, вы можете подписаться на меня в Medium или Twitter, чтобы узнать больше о JavaScript!

Если вам понравилась эта статья, вы можете подписаться на меня в Medium или Twitter, чтобы узнать больше!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .