【Vue.js】Vueの省略記法のメモ

親コンポーネントと子コンポーネントでのやりとりの時、まあ子→親(自分)のemit upとか、親→子(自分)でpropsとwatchでdata()に反映とかする際に、
コンポーネントタグの記法を忘れやすいのでメモ

v-bind 省略記法

:コロンのやつ、例えば、親(自分)から子コンポーネント経由で子に値を送るとき

<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>

<!-- 省略記法 -->
<a :href="url"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a :[key]="url"> ... </a>

v-on 省略記法

@のやつ、例えば子から親(自分)へと値を受け取るとき

<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>

よくコンポーネント間（親子関係）のやりとりで忘れがちというか、当たり前すぎて、余り書いて貰えないけど、結構入門時に忘れがちなのが、親とか子とか言って値のやり取りする際に、自分視点ではどうなるのか、つまり自分が親なのか、子なのか、という点を注意する必要がある。

厳密にいうと、自分ではなくて、親なのか子なのかという視点と送る側なのか受け取る側なのかという視点を持つ必要がある。

でないと、三世代関係以上（つまり親、子、孫）を考えた時に、どこにどのような記法(構文)を用いれば良いのかを間違えやすいと思う。
少なくとも私は間違えまくっていた。
※この例でも、孫視点から見たら、自分、親、祖父母(二代上の祖先？)？という関係になる

この辺りのemitup、props&watchでのdata()への反映、子コンポーネントタグを窓口にした具体的な書き方とかもまたどこかで（多分そのうち、いつかきっと）まとめようと思います。