在vue2中 引入子组件需要通过 components 注册后方可在模板页面中使用。

在 <script setup>中声明的变量、函数、import 引入的内容，都可以直接在模板页面中使用
引入组件：

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 子组件 -->
        <hederNav></hederNav>
      </el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script setup>
// 引入子组件
import hederNav from '../components/header.vue'
</script>

详见 使用组件