Mustache記法で展開していた値をpropsを通じて子コンポーネントに渡したいみたいなことがたまにある。
けれど、下みたいなノリの書き方ができない。
<div message="{{ message }}"></div>
そういう場合はv-bindでpropに渡す要素をデータバインディングしてやる。
親コンポーネント側のtemplate
注意点として、htmlは大文字を認識してくれないので、v-bind:の属性名で単語をつなげる場合は、ケバブケースで書いてやる。
<my-component v-bind:skill-duraion="duration"></my-component>
<!-- 蛇足だけどv-bindは省略できる-->
<my-component :skill-duraion="duration"></my-component>
子コンポーネント側のpropsで受け取る
Vueは、propsでデータを渡すときにケバブケースをキャメルケースに変換してくれる。
なぜなら、受け取ったJavascriptでは、ハイフンを変数名に使えないから。
よって受け取るには以下のように、
Arrayで属性名をString指定したり、
props: ['skillDuration']
とか
Dictionary(属性名: 検証要件)で受け取る。
props: { skillDuration: Number }
propsで受け取った値を使う
-
this.skillDurationのようにして使う。