如何在Vue3 setup中正确引入子组件？

Question

在 Vue3 的 `setup` 语法中，正确引入和使用子组件是开发者常遇到的基础问题。许多开发者在迁移至 Vue3 或使用 Composition API 时，不清楚如何在 `setup` 函数中注册和引入子组件，导致组件无法正常渲染或通信。本文将围绕如何在 Vue3 的 `setup` 中正确引入子组件，讲解包括组件注册、父子组件通信、以及使用 `defineComponent` 和 `import` 的最佳实践，帮助开发者掌握 Vue3 中组件组织和管理的核心方式，从而写出更清晰、可维护的代码结构。

Answer 1

一、Vue3 中 setup 语法的基本结构

Vue3 引入了 Composition API，使得组件逻辑更加灵活和可复用。在 setup 语法中，开发者不再使用传统的 components 选项注册子组件，而是通过 import 和 defineComponent 来引入和定义组件。

import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default defineComponent({
  setup() {
    return () => (
      <div>
        <ChildComponent />
      </div>
    )
  }
})
  

在上述代码中，我们通过 import 导入子组件，并在 defineComponent 的 setup 函数中返回 JSX 或使用 h 渲染函数来渲染子组件。

二、组件注册的两种方式

在 Vue3 的 setup 中，子组件的注册方式主要有两种：

• 方式一：直接在 setup 返回的渲染函数中使用导入的组件
• 方式二：使用 components 选项（适用于 script setup 语法）

方式	适用场景	代码示例
直接使用	适用于 Composition API + JSX	import Child from './Child.vue'
components 选项	适用于 script setup + template	components: { Child }

三、父子组件通信机制

在 Vue3 中，父子组件通信依旧依赖 props 和 emit。在 setup 函数中，这两个参数通过函数参数传入：

import { defineComponent } from 'vue'

export default defineComponent({
  props: ['title'],
  emits: ['update:title'],
  setup(props, { emit }) {
    const handleChange = () => {
      emit('update:title', 'New Title')
    }

    return () => (
      <div>
        <p>{props.title}</p>
        <button onClick={handleChange}>Change Title</button>
      </div>
    )
  }
})
  

子组件通过 props 接收父组件传递的数据，通过 emit 向父组件发送事件。

四、使用 defineComponent 的最佳实践

defineComponent 是 Vue3 中推荐的组件定义方式，它不仅支持类型推导（与 TypeScript 配合使用），还能明确组件的配置项。

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  name: 'MyComponent',
  props: {
    msg: String
  },
  setup(props) {
    return () => <div>{props.msg}</div>
  }
})

export default MyComponent
  

通过这种方式，组件的结构更加清晰，也便于维护和类型检查。

五、模块化与组件组织结构

随着项目规模的增大，良好的组件组织结构显得尤为重要。建议采用如下结构：

src/
├── components/
│   ├── common/
│   │   └── Button.vue
│   ├── layout/
│   │   └── Header.vue
│   └── pages/
│       └── Home.vue
└── views/
    └── Dashboard.vue
  

通过模块化划分，可以提高组件的复用性，并减少引入路径的复杂度。

六、流程图：组件引入与通信流程

graph TD
A[父组件] --> B[引入子组件]
B --> C[注册子组件]
C --> D[传递 props]
D --> E[子组件接收 props]
E --> F[触发 emit]
F --> G[父组件监听事件]