教程：第 11 步

组件

到目前为止，我们只使用了单个组件。真正的 Vue 应用往往是由嵌套组件创建的。

父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它。

组合式 API（单文件组件）

import ChildComp from './ChildComp.vue'

选项式 API（单文件组件）

import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  }
}

我们还需要使用 components 选项注册组件。这里我们使用对象属性的简写形式在 ChildComp 键下注册 ChildComp 组件。

在模板中使用组件

<ChildComp />

不使用单文件组件（HTML 文件）

import ChildComp from './ChildComp.js'

createApp({
  components: {
    ChildComp
  }
})

我们还需要使用 components 选项注册组件。这里我们使用对象属性的简写形式在 ChildComp 键下注册 ChildComp 组件。

因为我们是在 DOM 中编写模板语法，因此需要遵循浏览器的大小写敏感的标签解析规则。所以，我们需要使用 kebab-case 的名字来引用子组件：

<child-comp></child-comp>

现在自己尝试一下——导入子组件并在模板中渲染它。