Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

Vue.js2系の詰まるところ

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

久しぶりにVue.jsを触っている。Vue.jsは割と公式のドキュメントが読みやすいとされているようだしそれには同意するが、JavaScriptの記法が自由闊達すぎるため、参考ソースがけっこう見つけにくいところはあるように思う。 今回Vue.js2系統を触っていて詰まったところを備忘録的に書いておく。

Chromeの機能拡張

Chrome機能拡張にVue.jsの開発者ツールがある。これはChromeの開発者ツールにVueインスタンスの分析を加えてくれる素晴らしいツールだ。 通常のものはVue.js2系統で、Vue.js3系統のものにはβ版が配布されている。これを間違えるとまったく反応しないようなので注意が必要。 ちなみに私は正しいものを使っていてもうまく動作しない時があるが何なのだろうか……localhostで開発してるせい?

Vueインスタンスのオプション

オプションについて忘れがちなことなど。

{
data(){
//コンポーネントの場合、関数にして、return で値の初期値を含むオブジェクトを投げる。
return {
    foo:0,
    bar:'sample'
    }
},
prop:['some-attr'],//配列かオブジェクトのみ。各ブラケットなしでは認識されない

}

data()

コンポーネントの場合、dataは関数でなければなりません

prop

コンポーネントの属性値を子コンポーネントで利用する際に使う(後述)。 配列かオブジェクトのみ、という制限がある。文字列は不可なので、1つだけだとしても配列に入れる。

親(rootComponent)から子コンポーネントへ値/変数を渡す

コンポーネントからから子コンポーネントに値を渡す場合は、テンプレート(html)の要素の属性値を通じて値を渡す。 まず子コンポーネントのオプションpropsに、DOM経由で受け入れる属性の名前を記入する。propsは配列かオブジェクトでなければならない。 以下の例では'some-attr'という属性名の値をインスタンスに受け入れる。

//子コンポーネントのjs
export default {
name : 'some-child-component',
props: ['some-attr']
}

次に、親コンポーネントのhtmlテンプレートで、子コンポーネント要素に属性'some-attr'をつけ、その値に「渡したい値(変数ではなく、静的な値)」を書く。

<!-- 親コンポーネントのテンプレート -->
<some-child-component some-attr="渡したい値"></some-child-component>

コンポーネントsome-attrを利用できるようになる。

<!-- 子コンポーネントのテンプレート -->
{{ some-attr }}
<!-- 想定される出力:渡したい値 -->

変数(動的な値)の場合は、属性の頭にコロンをつけ、属性の値に変数名を書く(これはv-bindの省略記法。詳しくは 静的あるいは動的なプロパティの受け渡し )。次の例では、親コンポーネントの変数foobarをv-bindして子コンポーネントで使えるようにする。

<!-- 属性の前のコロンを見落とさないようにする -->
<some-child-component :some-attr="foobar"></some-child-component>

コンポーネントでは親から受け取った値を利用することができる

<!-- 子コンポーネントのテンプレート -->
{{ some-attr }}
<!-- foobarの中の値が出力される -->