ただの文字列をコンポーネントに渡す話。（Vue.js始めるおれおれアドベントカレンダー2016 – 9日目）

Vue.js始めるおれおれアドベントカレンダー2016 – 9日目

今まで二重引用符 "…" の中に一重引用符 '…' を書かないと駄目かなって思ってたんだけど。

<my-component v-bind:message="'Hello World!'"></my-component>
or
<my-component :message="'Hello World!'"></my-component>

MyMessage = {
    template: '<p>{{message}}</p>',
    props: ['message']
}

v-bind ではないHTMLの属性の書き方でいけることに気が付いた。

<my-component message="Hello World!"></my-component>

JS側は一緒。

そうだったのか！

デモ

• https://jsfiddle.net/ginpei/e830mzbr/

よくわからないこと

仕様なの？

どこに書いてあるのかよくわからない。あるならここら辺だと思うんだけど。

• props
• v-bind

いや考え方の順序が違うのかな。 props のところに『親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュです。』とあるので、そもそもこれは「属性」を受け取るものであると。一方の v-bind もコンポーネントに渡す値を云々じゃなくて、あくまで「属性」を束縛するものであると。結果的にコンポーネントに情報を渡せるけど。

あ、合点がいったわ。