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>
相关推荐
StrongerIrene9 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子18 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168826 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
whhhhhhhhhw1 小时前
Node.js核心API(fs篇)
node.js
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~2 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript