Vue 组件嵌套指南：如何使用子组件构建复杂应用

Vue 组件的嵌套可以通过使用组件的标签来实现。在父组件的模板中，使用子组件的标签来嵌套子组件。

以下是一个示例：

1. 创建子组件 ChildComponent.vue：

<template>
  <div>
    <h2>子组件</h2>
  </div>
</template>
<script>
export default {
name: 'ChildComponent'
}
</script>

2. 创建父组件 ParentComponent.vue：

<template>
  <div>
    <h1>父组件</h1>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: {
ChildComponent
}
}
</script>

在父组件的模板中，使用 `<child-component></child-component>` 标签嵌套了子组件。然后，在父组件的脚本中，通过 `import` 导入子组件，并在 `components` 选项中注册该子组件。

这样，当使用父组件时，子组件会自动被嵌套并渲染出来。

注意：在父组件中使用子组件时，标签名需要使用 kebab-case（短横线分隔命名），而在子组件中的 `name` 选项可以使用 PascalCase（大驼峰命名）。这是因为 HTML 不区分大小写，而 Vue 组件使用的是驼峰式命名。