おはようございます。そうすけです。
運営者：そうすけ
30代のブロガーとエンジニア。
工場勤務→情シス→ソフトウェアエンジニア
主にフロントエンド開発を行っています。
趣味はガジェットと植物。
NuxtやVue初心者がv-bindを学習するとき、表示の仕方に違和感を感じることがあります。
scriptタグ内の変数をバインドさせようとしたとき、宣言した変数にハイフンがついた形でないとエラーがおきるのです。
例えば下記のケース。
下記はinde.vueにModeswitcherというカスタムコンポーネントを設置し、v-bindでindex.vueの値をModeswitcherへPropsとして送っています。
<template>
<ModeSwitcher :dark-or-empty="mode" :switch-mode="switchMode"></ModeSwitcher>
</template>
<script setup lang="ts">
const switchMode = () =>{
mode.value =mode.value? "" :"dark";
}
</script><template>
<button @click="switchMode">
{{ darkOrEmpty ||"light"}}mode
</button>
</template>
<script lang="ts" setup>
defineProps<{
darkOrEmpty:string|null;
switchMode:()=>void;
}>();
</script>Modeswitcherでは
darkOrEmpty、switchMode
と宣言している変数です。
しかし、v-bindして使用する際、
:dark-or-empty、:switch-mode
とハイフンを入れた形で記述します。
そのまま記載するとエラーになります。
なぜこうなるの？
VUEファイルがVueは自動でキーをキャメルケースからケバブケースに変換します。
VUEをコンパイルした時にhtmlがケバブケースしか理解できないためです。
Vue.js において、:dark-or-empty=”mode” のような記法を使用する場合、そのプロパティはケバブケース（kebab-case）で指定する必要があります。
Javascriptで宣言したキャメルケースはHTMLのタグとして読み取れないのです。
要するに、コンポーネントのPropsでDarkOrEmptyと定義した変数は、HTML側にdark-or-emptyというハイフン付きの記載にすると、HTML側がJavascriptとして認識されるということです。
Vue.js はこの HTML の属性としてのケバブケースを、コンポーネント内で定義されたキャメルケースのプロパティに正しくバインディングして処理します
そもそもケバブケースとかってなに？
それぞれの記法の説明と用途について。
ケバブケース
文字と文字の区切りを-で表現するやり方。「チェインケース」とも言う。
ケバブのお肉をぶっさしている感じからきているとか
this-case-is-god
props 属性は「ケバブケース」 その他は「キャメルケース」
<template>
<MyComponent :my-data="hoge"></MyComponent>
</template>
<script>
export default { props: ['myData'], }
</script>Emitは「ケバブケース」
<script>
export default { methods: { hogeFunc() { this.$emit('my-emit') } } }
</script>公式にも記載があります。
キャメルケース
文字と文字の区切りを大文字で表現するやり方。
よく見るやつです。ラクダのこぶですね
thisCaseIsGod
パスカルケース
文字と文字の区切りを大文字で表現＋先頭の文字も大文字にする。
それもそのはず、「アッパーキャメルケース」とも呼ばれるのだから。
これもよく見ますね
ThisCaseIsGod
コンポーネントは「パスカルケース」
<template>
<MyComponent></MyComponent>
</template>まとめ
Vue コンポーネント内で defineProps を使用してプロパティを定義する際には、キーはキャメルケース（camelCase）で指定します。
しかし、HTML の属性としてこれを使う場合、ケバブケースが推奨されます。
Vue.js は内部的にこれらのスタイルを変換して処理するため、プロパティの命名スタイルを揃えることが望ましいです。
具体的には、darkOrEmpty というプロパティを dark-or-empty として HTML 上で使用しているため、このようなハイフンを含んだケバブケースの表現が必要です。
コメント