【Vue.js】propsのプロパティ名にキャメルケースを使う場合の注意点

Posted at 2020-07-25

propsのプロパティ名

Vue.jsにおいて、propsのプロパティ名にキャメルケースを使う場合に1つだけ注意点があります。それは、HTMLとJavaScriptでは文字の処理方法が異なるということです。

HTMLでは、属性名の大文字と小文字を区別せず、すべての大文字を小文字として認識します。つまり、HTMLのテンプレート内では、キャメルケースのプロパティ名はケバブケースで書く必要があります。具体的には下記のとおりです。

JavaScript

Vue.component('comp-child', {
  template: '<p>{{ compText }}</p>',
  props: {
    compText: String
  },
})

HTML

<comp-child comp-text="HTMLではケバブケースで書きましょう"></comp-child>

JavaScriptではキャメルケースを使用したcompTextというプロパティ名を、HTMLではケバブケースを使用したcomp-textとすることで正常に動作します。

Vue.jsのpropsのプロパティ名においてキャメルケースを使うことはよくあるかと思いますが、HTMLとJavaScriptでの文字の処理方法の違いを押さえ、HTMLではケバブケースを使う必要があることを覚えておきましょう。

Twitterも更新していますので、よかったらフォローお願いします！
Twitterアカウントはこちら