快捷導(dǎo)航

Vue駝峰與短橫線分割命名中有哪些坑

更新時(shí)間：2023年02月10日 11:39:13 作者：Zong_0915

這篇文章主要介紹了Vue駝峰與短橫線分割命名中的注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

駝峰和短橫線分割命名注意事項(xiàng)

我們一般定義組件的方式有兩種：

短橫線分隔命名：kebab-case。
首字母大寫命名：PascalCase 。

組件注冊(cè)命名

例如，我寫一個(gè)簡(jiǎn)單的子組件。

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

注冊(cè)的時(shí)候采用PascalCase命名：

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

使用的時(shí)候：

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

結(jié)果如下：

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

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

一般編碼的時(shí)候，習(xí)慣這樣：命名的時(shí)候采取PascalCase命名法，使用的時(shí)候采取kebab-case法（每個(gè)單詞的首字母小寫）。

父子組件數(shù)據(jù)傳遞時(shí)命名

父組件在給子組件傳遞變量的時(shí)候，如果變量名稱采用kebab-case法，那么子組件在接收的時(shí)候應(yīng)該寫駝峰命名法。

例如，我再父組件中這么傳參：

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

子組件的接收：駝峰命名法。

<template>
  <div class="border">
    <h2>我是子組件</h2>
    <div>接收來自父組件傳入的參數(shù):{{ 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>

效果如下：

父子組件函數(shù)傳遞

父組件在傳遞給子組件的時(shí)候，命名上我測(cè)試下來沒有什么特殊的要求。先說下傳遞的命名上：

父組件傳遞：

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

子組件的接收上：

<template>
  <div class="border">
    <h2>我是子組件</h2>
    <div>接收來自父組件傳入的參數(shù):{{ props.userName }}</div>
    <a @click="hello">點(diǎn)擊</a>
    <br>
    <a @click="hello2">點(diǎn)擊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>

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