dynamic-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dynamic Components

动态组件

When to Use

使用场景

Use this when you need to render different components based on user interaction (e.g., tabs, views)
This is helpful as an alternative to multiple
```
v-if
```
/
```
v-else
```
blocks for conditional component rendering

当你需要根据用户交互（如标签页、视图切换）渲染不同组件时使用
这可以作为多个
```
v-if
```
/
```
v-else
```
条件渲染组件的替代方案，更为便捷

Instructions

操作步骤

Bind the
```
is
```
attribute on
```
<component>
```
to a reactive value referencing the component definition
Use a
```
tabs
```
object mapping names to imported component definitions
Wrap
```
<component>
```
with
```
<KeepAlive>
```
to preserve state when switching between dynamic components

将
```
<component>
```
上的
```
is
```
属性绑定到一个引用组件定义的响应式值
使用一个
```
tabs
```
对象，将组件名称映射到导入的组件定义
使用
```
<KeepAlive>
```
包裹
```
<component>
```
，以在切换动态组件时保留状态

Details

详细说明

html

<!-- Home -->
<template><div class="tab">Home component</div></template>

<!-- Feed -->
<template><div class="tab">Feed component</div></template>

<!-- History -->
<template><div class="tab">History component</div></template>

Our goal is to build an interface that surfaces a list of tabs that can be clicked. Depending on what tab is clicked, we want to dynamically render a certain component.

When clicking between the tabs, we want components to be dynamically unmounted and mounted without the use of routing. Though something like this could be achieved by conditionally rendering child templates with the help of directives like

v-if

and

v-else

, this is a perfect use case of Vue dynamic components.

In the parent

App

component of our app, we can first import the three individual components to have them available in the template. We'll also create a

currentTab

reactive property that is given an initial value of

"Home"

html

<script setup>
  import { ref } from "vue";
  import Home from "./components/Home.vue";
  import Feed from "./components/Feed.vue";
  import History from "./components/History.vue";

  const currentTab = ref("Home");
  const tabs = {
    Home,
    Feed,
    History,
  };
</script>

Note that our

tabs

object references the actual component definitions and not just the component names.

In the

App

component template, we'll look to render three separate tab buttons — one for each component we intend to display. We'll use the

v-for

directive to help achieve this.

html

<template>
  <div class="demo">
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
  </div>
</template>

To dynamically render a certain child component, we'll bind an

is

attribute to the reserved

<component>

element. The value attached to the

is

attribute should correspond to the child component that we want to render dynamically.

html

<template>
  <div class="demo">
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
    <component :is="tabs[currentTab]" class="tab"></component>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import Home from "./components/Home.vue";
  import Feed from "./components/Feed.vue";
  import History from "./components/History.vue";

  const currentTab = ref("Home");

  const tabs = {
    Home,
    Feed,
    History,
  };
</script>

With the dynamic

<component />

element placed in our template, the child components are now dynamically unmounted and mounted depending on which tab has been selected.

html

<!-- Home -->
<template><div class="tab">Home component</div></template>

<!-- Feed -->
<template><div class="tab">Feed component</div></template>

<!-- History -->
<template><div class="tab">History component</div></template>

我们的目标是构建一个包含可点击标签列表的界面，根据点击的标签动态渲染对应的组件。

在切换标签时，我们希望组件能动态卸载和挂载，且无需使用路由。虽然可以通过

v-if

和

v-else

等指令条件渲染子模板来实现类似效果，但这正是Vue动态组件的理想用例。

在应用的父组件

App

中，我们首先导入这三个独立组件，以便在模板中使用。同时创建一个初始值为

"Home"

的响应式属性

currentTab

。

html

<script setup>
  import { ref } from "vue";
  import Home from "./components/Home.vue";
  import Feed from "./components/Feed.vue";
  import History from "./components/History.vue";

  const currentTab = ref("Home");
  const tabs = {
    Home,
    Feed,
    History,
  };
</script>

注意，我们的

tabs

对象引用的是实际的组件定义，而非仅仅是组件名称。

在

App

组件的模板中，我们将渲染三个独立的标签按钮，每个按钮对应一个要显示的组件。我们使用

v-for

指令来实现这一点。

html

<template>
  <div class="demo">
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
  </div>
</template>

为了动态渲染某个子组件，我们需要给保留的

<component>

元素绑定

is

属性。

is

属性的值应与我们要动态渲染的子组件相对应。

html

<template>
  <div class="demo">
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
    <component :is="tabs[currentTab]" class="tab"></component>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import Home from "./components/Home.vue";
  import Feed from "./components/Feed.vue";
  import History from "./components/History.vue";

  const currentTab = ref("Home");

  const tabs = {
    Home,
    Feed,
    History,
  };
</script>

在模板中添加动态

<component />

元素后，子组件现在会根据选中的标签动态卸载和挂载。

Preserving state

状态保留

Preserving state can be an important consideration to keep in mind when using dynamic components. By default, when a component is unmounted, its state is lost. However, Vue provides a way to preserve the state of dynamic components using the

<KeepAlive>

component.

To preserve the state of dynamic components, we can wrap the

<component>

element with the

<KeepAlive>

component.

html

<template>
  <div class="demo">
    <!--  -->
    <KeepAlive>
      <component :is="tabs[currentTab]" class="tab"></component>
    </KeepAlive>
  </div>
</template>

<script setup>
  // ...
</script>

With the

<KeepAlive>

component wrapping the

<component>

element, the state of the dynamic components will be preserved when they are unmounted. This means that any data or component state will be maintained, and the component will retain its previous state when it is mounted again.

To see an example of this, we can update each of our child components to contain a simple counter that increments.

html

<!-- Repeat this counter example for Home, Feed, and History -->
<template>
  <div class="tab">
    Home component
    <p>Counter: {{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

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

  const counter = ref(0);

  const incrementCounter = () => {
    counter.value++;
  };
</script>

With these changes, the counter state for each respective child component is kept preserved even as we dynamically switch between components.

By using the

<KeepAlive>

component, we can enhance the behavior of dynamic components by preserving their state and providing a smoother user experience when switching between tabs.

在使用动态组件时，状态保留是一个需要考虑的重要因素。默认情况下，组件卸载时其状态会丢失。不过，Vue提供了

<KeepAlive>

组件来保留动态组件的状态。

要保留动态组件的状态，我们可以用

<KeepAlive>

包裹

<component>

元素。

html

<template>
  <div class="demo">
    <!--  -->
    <KeepAlive>
      <component :is="tabs[currentTab]" class="tab"></component>
    </KeepAlive>
  </div>
</template>

<script setup>
  // ...
</script>

用

<KeepAlive>

组件包裹

<component>

元素后，动态组件在卸载时其状态会被保留。这意味着任何数据或组件状态都会被维持，当组件再次挂载时会恢复之前的状态。

为了直观展示这一点，我们可以更新每个子组件，添加一个简单的计数器用于递增。

html

<!-- 为Home、Feed和History组件重复此计数器示例 -->
<template>
  <div class="tab">
    Home component
    <p>Counter: {{ counter }}</p>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

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

  const counter = ref(0);

  const incrementCounter = () => {
    counter.value++;
  };
</script>

经过这些修改后，即使我们在动态组件之间切换，每个子组件的计数器状态也会被保留。

通过使用

<KeepAlive>

组件，我们可以增强动态组件的行为，保留其状态，在切换标签页时为用户提供更流畅的体验。

dynamic-components

Original

Translation

Dynamic Components

动态组件

Table of Contents

目录

When to Use

使用场景

Instructions

操作步骤

Details

详细说明

Preserving state

状态保留

Source

来源

References

参考资料