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>

結果如下：

自定義的組件在使用上，命名的規(guī)則如下：

注冊的時候：使用了PascalCase命名。
使用的時候：可以使用PascalCase命名（首字母不區(qū)分大小寫）或者kebab-case命名（每個單詞的首字母不區(qū)分大小寫）。

一般編碼的時候，習慣這樣：命名的時候采取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>

結果如下：無論是使用下劃線分割還是原名，都可以正常接收。