Vue 中组件命名与引用

Vue 中组件命名与引用

前言

在 vue 项目中,我们会发现在代码中,import 组件 和 components 组件注册中得命名方式与组件引用时的命名方式不一样,这种现象是由组件名的大小写转换规则造成的。如下示例:

组件引入与注册:

javascript 复制代码
// 导入组件(使用大驼峰命名)
import UserChoose from "../components/user";

export default {
  components: {
    UserChoose // 注册组件(大驼峰命名)
  }
}

组件引用:

html 复制代码
<!-- 在模板中使用组件(短横线命名) -->
<user-choose></user-choose>

Vue 支持两种组件命名方式

1、PascalCase(大驼峰命名)

像 UserChoose 这样,每个单词首字母大写。在 JavaScript 里定义组件或者导入组件时,通常会采用这种命名方式。

2、kebab-case(短横线分隔命名)

例如 user-choose,单词之间用短横线分隔。在 Vue 模板的 HTML 标签里引用组件时,需要使用这种命名方式。

Vue 之所以要进行这种转换,是为了适配 HTML 对大小写不敏感的特性。当你在模板里使用短横线命名的组件时,Vue 会自动将其映射为对应的大驼峰命名的组件

也可以选择在模板中直接使用大驼峰命名,但必须保证处于原生 HTML 支持大写标签的环境中,比如单文件组件(SFC)。不过,为了保证代码风格的一致性,建议统一使用短横线命名。

javascript 复制代码
<!-- 这种写法仅在SFC中有效 -->
<UserChoose></UserChoose>

推荐写法

html 复制代码
<!-- 推荐:统一使用 kebab-case -->
<template>
  <div>
    <occupation-choose />
  </div>
</template>

<script>
import UserChoose from './components/user.vue'

export default {
  components: {
    'user-choose': UserChoose // 与模板一致
  }
}
</script>

单文件组件(SFC)

1、什么是单文件组件(SFC)

单文件组件(Single-File Component,SFC)是 Vue.js 特有的一种文件格式,也被称为.vue文件。它把一个 Vue 组件的模板(template)、 逻辑(script)和样式(style) 封装在同一个文件里,形成一个独立的组件单元。这种设计让组件具有很强的内聚性和可维护性,是 Vue 项目的核心组织方式。

2、单文件组件(.vue)的结构

html 复制代码
<template>
  <!-- 组件的HTML结构 -->
  <div class="hello-world">
    <h1>{{ message }}</h1>
    <button @click="greet">Say Hello</button>
  </div>
</template>

<script>
// 组件的JavaScript逻辑
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    greet() {
      this.message = 'Hello from Vue SFC!'
    }
  }
}
</script>

<style scoped>
/* 组件的CSS样式,scoped表示样式只作用于当前组件 */
.hello-world {
  padding: 20px;
  text-align: center;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}
</style>
相关推荐
Dream耀3 分钟前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce1 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
吳所畏惧1 小时前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
JSON_L2 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊2 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选2 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
xptwop3 小时前
05-ES6
前端·javascript·es6
Heo3 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端
JS_Love3 小时前
nodejs 手动实现 multipart/byteranges 分块下载
node.js
前端小巷子4 小时前
深入 npm 模块安装机制
前端·javascript·面试