###
Vue 中
Component 动态
组件的使用方法
#### 基本概念
在
Vue 中，`<
component>` 是一个特殊的内置元素，用于动态地挂载不同类型的
组件。它通过 `is` 属性来决定具体渲染哪个
组件[^2]。
#### 项目结构示例
假设有一个简单的
Vue 项目结构如下：
```plaintext
.
├── package
.json
└── src
├── App
.vue
├──
components
│ ├──
ComponentA
.vue
│ ├──
ComponentB
.vue
│ └──
ComponentC
.vue
└── main
.js
```
其中，`
ComponentA
.vue`, `
ComponentB
.vue`, 和 `
ComponentC
.vue` 是三个独立的子
组件。
---
#### 示例代码：基本用法
以下是 `<
component>` 的基础实现方式：
```
vue
<!-- Parent
Component.vue -->
<template>
<div>
<!-- 使用
component 标签并绑定 is 属性 -->
<
component :is="current
Component"></
component>
<!-- 切换按钮 -->
<button @click="changeToA">切换到 A</button>
<button @click="changeToB">切换到 B</button>
<button @click="changeToC">切换到 C</button>
</div>
</template>
<script>
import
ComponentA from '
./
components/
ComponentA
.vue';
import
ComponentB from '
./
components/
ComponentB
.vue';
import
ComponentC from '
./
components/
ComponentC
.vue';
export default {
data() {
return {
current
Component: '
ComponentA', // 默认显示
ComponentA
};
},
methods
: {
changeToA() {
this
.current
Component = '
ComponentA';
},
changeToB() {
this
.current
Component = '
ComponentB';
},
changeToC() {
this
.current
Component = '
ComponentC';
},
},
components
: {
ComponentA,
ComponentB,
ComponentC,
},
};
</script>
```
在这个例子中，通过改变 `current
Component` 的值可以动态切换展示的
组件[^3]。
---
#### 异步加载
组件
为了优化性能，
Vue 支持异步加载
组件。可以通过 JavaScript 的 `defineAsync
Component` 方法或者直接返回 Promise 来定义异步
组件。
##### 示例代码：异步加载
组件
```javascript
// 定义异步
组件
const Async
ComponentA = defineAsync
Component(() =>
import('
./
components/
ComponentA
.vue')
);
export default {
components
: {
Async
ComponentA,
},
};
```
在这种情况下，当
组件被首次访问时才会触发导入操作，从而减少初始页面加载时间。
---
#### 父子
组件通信
如果需要在父
组件和子
组件之间传递数据或事件，则可以利用 props 和自定义事件完成通信[^4]。
##### 示例代码：父子
组件通信
**Parent
Component.vue**
```
vue
<template>
<div>
<child-
component :message="parentMessage" @custom-event="handleCustomEvent"></child-
component>
</div>
</template>
<script>
import Child
Component from '
./Child
Component.vue';
export default {
data() {
return {
parentMessage
: '来自父
组件的消息',
};
},
methods
: {
handleCustomEvent(data) {
console
.log('接收到子
组件的数据
:', data);
},
},
components
: {
Child
Component,
},
};
</script>
```
**Child
Component.vue**
```
vue
<template>
<div>
{{ message }}
<button @click="sendDataToParent">发送消息给父
组件</button>
</div>
</template>
<script>
export default {
props
: ['message'],
methods
: {
sendDataToParent() {
const eventData = '这是子
组件发来的数据';
this
.$emit('custom-event', eventData);
},
},
};
</script>
```
在这里，父
组件向子
组件传递了一个名为 `message` 的 prop，并监听了子
组件发出的 `custom-event` 自定义事件。
---
### 注意事项
1
. **
组件中的 Data 必须为函数式**
: 如果在一个
Vue 组件中定义 `data` 配置项，那么它的值必须是一个函数而不是对象，以确保每个实例都有独立的状态副本[^1]。
2
. **动态
组件销毁行为**
: 当动态
组件发生切换时，默认会保留之前的 DOM 节点而不销毁它们。如果希望完全销毁旧
组件，在 `<keep-alive>` 外部使用 `<
component>` 即可。
---
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
