Vue.js始めるおれおれアドベントカレンダー2016 – 9日目
今まで二重引用符 "…"
の中に一重引用符 '…'
を書かないと駄目かなって思ってたんだけど。
1 2 3 | < my-component v-bind:message = "'Hello World!'" ></ my-component > or < my-component :message = "'Hello World!'" ></ my-component > |
1 2 3 4 | MyMessage = { template: '<p>{{message}}</p>' , props: [ 'message' ] } |
v-bind
ではないHTMLの属性の書き方でいけることに気が付いた。
1 | < my-component message = "Hello World!" ></ my-component > |
JS側は一緒。
そうだったのか!
デモ
よくわからないこと
仕様なの?
どこに書いてあるのかよくわからない。あるならここら辺だと思うんだけど。
いや考え方の順序が違うのかな。 props
のところに『親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュです。』とあるので、そもそもこれは「属性」を受け取るものであると。一方の v-bind
もコンポーネントに渡す値を云々じゃなくて、あくまで「属性」を束縛するものであると。結果的にコンポーネントに情報を渡せるけど。
あ、合点がいったわ。