Vue驼峰与短横线分割命名中有哪些坑

更新时间：2023年02月10日 11:39:13 作者：Zong_0915

这篇文章主要介绍了Vue驼峰与短横线分割命名中的注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

驼峰和短横线分割命名注意事项

我们一般定义组件的方式有两种：

短横线分隔命名：kebab-case。
首字母大写命名：PascalCase 。

组件注册命名

例如，我写一个简单的子组件。

<template>
  <div class="border">
    <h2>我是子组件</h2>
  </div>
</template>
<script setup>
</script>
<style scoped>
.border {
  border: 1px solid;
  width: 400px;
}
</style>

注册的时候采用PascalCase命名：

createApp(App)
    .component('MyComponent', MyComponent)
    .mount('#app')

使用的时候：

<template>
  <div class="border">
    <h1 >我是父组件</h1>
    <my-component />
    <!-- <MyComponent /> -->
    <!-- <myComponent /> -->
  </div>
</template>
<style scoped>
.border {
  border: 1px solid;
  width: 400px;
  height: 200px;
}
</style>

结果如下：

自定义的组件在使用上，命名的规则如下：

注册的时候：使用了PascalCase命名。
使用的时候：可以使用PascalCase命名（首字母不区分大小写）或者kebab-case命名（每个单词的首字母不区分大小写）。

一般编码的时候，习惯这样：命名的时候采取PascalCase命名法，使用的时候采取kebab-case法（每个单词的首字母小写）。

父子组件数据传递时命名

父组件在给子组件传递变量的时候，如果变量名称采用kebab-case法，那么子组件在接收的时候应该写驼峰命名法。

例如，我再父组件中这么传参：

<MyComponent :user-name="name"/>

子组件的接收：驼峰命名法。

<template>
  <div class="border">
    <h2>我是子组件</h2>
    <div>接收来自父组件传入的参数:{{ props.userName }}</div>
  </div>
</template>
<script setup lang="ts">
import { computed, defineProps, withDefaults } from "vue";
interface Props {
  // 记得使用驼峰命名法
  userName: string;
}
const props = withDefaults(defineProps<Props>(), {
  userName: "",
});
</script>
<style scoped>
.border {
  border: 1px solid;
  width: 400px;
}
</style>

效果如下：

父子组件函数传递

父组件在传递给子组件的时候，命名上我测试下来没有什么特殊的要求。先说下传递的命名上：

父组件传递：

<MyComponent :user-name="name" @sayHello="sayHello"/>
const sayHello =  ()=>{
  console.log('Hello')
}

子组件的接收上：

<template>
  <div class="border">
    <h2>我是子组件</h2>
    <div>接收来自父组件传入的参数:{{ props.userName }}</div>
    <a @click="hello">点击</a>
    <br>
    <a @click="hello2">点击2</a>
  </div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
interface Props {
  userName: string;
}
const props = withDefaults(defineProps<Props>(), {
  userName: "",
});
const emit = defineEmits(["say-hello", "sayHello"]);
const hello = () => {
  emit("say-hello");
};
const hello2 = () => {
  emit("sayHello");
};
</script>
<style scoped>
.border {
  border: 1px solid;
  width: 400px;
}
</style>

结果如下：无论是使用下划线分割还是原名，都可以正常接收。

经过测试，父组件在传函数的时候，使用kebab-case法，和上述案例一个效果。

因此我们就这么约定吧：

父组件传递函数的时候，就原名传入即可。

到此这篇关于Vue驼峰与短横线分割命名中有哪些坑的文章就介绍到这了,更多相关Vue驼峰与短横线分割命名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue集成Iframe页面的方法示例
这篇文章主要介绍了Vue集成Iframe页面的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
vue-router实现组件间的跳转（参数传递）
这篇文章主要为大家详细介绍了vue-router实现组件间的跳转，参数传递方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)
这篇文章主要介绍了Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs),本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vue之Axios的异步通信详解
这篇文章主要为大家详细介绍了Vue之Axios的异步通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
Vue组件间的双向绑定示例解析
这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值
2023-03-03
vue中使用echarts的方法实例详解
这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
2023-05-05
vue常用高阶函数及综合实例
这篇文章主要介绍了vue常用高阶函数及综合案例，文章内容讲解的很清晰，有对于这方面感兴趣的同学可以研究下
2021-02-02
vue移动端实现左滑编辑与删除的全过程
vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下
2021-05-05
修改Vue打包后的默认文件名操作
这篇文章主要介绍了修改Vue打包后的默认文件名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue中SSR的作用是什么
这篇文章主要介绍了Vue中SSR的作用及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04