その4です
今回はpropsとemitについて紹介します。
難しいというよりかは、ややこしいので順を追って理解しましょう。
概念
propsとemitは親コンポーネントと子コンポーネント間での値の受け渡しに使います。
web系エンジニアの方なら、このような狂った親子ゲームには慣れてらっしゃいますよね？
具体例 props
まずpropsについてです、以下の図を見てください。
v-bindを使ってbindした変数などをpropsで受け取ることで、親コンポーネントから子コンポーネントに値を渡します。
ケバブケースとキャメルケース
更に注意点としてhtmlは大文字を認識してくれません。
<my-component v-bind:childWord="parentWord"></my-component>
v-bind:の属性名はキャメルケースではなくケバブケースを用いましょう
<my-component v-bind:child-word="parentWord"></my-component>
しかしケバブケースではjsの方で受けとれなくなります、なぜなら変数名にハイフンが使えないからです。
props: ['child-word']
vue.jsの粋な心遣いとして、htmlでケバブケースでv-bindした属性はpropsに渡ったときに勝手にキャメルケースに変換してくれます。（話をややこしくしている原因）
props: ['childWord']
以下の図は問題なく動作します
非常にややこしい
具体例 emit
次にemitについてです、以下の図が最も簡単で基本的なemit例になると思います
親コンポーネントはイベントを受け取るときはv-onディレクティブでイベントを受け取ります。v-bindではないので注意しましょう。
またイベントを受け取ったら基本的にmethodsで関数を実行するといいでしょう。
emitは実行場所を選びません、また以下の図のように引数を付けてイベントを実行し、引数を親コンポーネントで受け取ることもできます。
ケバブケースとキャメルケース
emitではキャメルケースとケバブケースを勝手に変換してくれたりはしません、なのでイベント名は常にケバブケースを使いましょう。
propsとemitを両方使う
書くのに疲れたのでJSFiddleで確認してください
v-forでたくさんコンポーネントを作って、propsで渡し、emitで受け取るのは結構使えるテクニックだと思うので覚えておくいいでしょう。
また注意点として、methodsなどからpropsの値を使う場合は以下のように
methods: {
childFunction: function () {
this.$emit('child-event', this.$props.childWord)
}
}
と書きましょう
# おわり
おわり