Vue 组件注册怎么在单文件组件中局部导入

雨枫吖_3919

雨枫吖_3919

2026-10-18

866人浏览

原创

单文件组件中局部注册的核心是“导入即注册、作用域限定”:使用时导入即可用,无需components选项;options api则需在components中显式声明;二者均要求组件名符合pascalcase规范,确保模板正确识别。

vue 组件注册怎么在单文件组件中局部导入

在单文件组件(.vue 文件)中做局部导入和注册,核心就一句话:导入即注册,用完即止,作用域严格限定在当前组件内。


一、使用 <script setup></script>(Vue 3 推荐方式)

这是最简洁、最常用的方式。只要 import 了组件,它就自动可用了,无需额外注册。

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'
import UserCard from '@/components/UserCard.vue'
</script><template><helloworld></helloworld><usercard :user="{ name: '张三' }"></usercard></template>

✅ 特点:

  • 编译器自动将 import 的组件注入模板作用域
  • 不污染全局,天然支持 Tree Shaking
  • 组件名直接按文件名推导(如 HelloWorld.vue → <helloworld></helloworld>),也可重命名导入

⚠️ 注意:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习