【輪読会】基礎から学ぶVue.js【渋谷】 CH.5

Transcript

1. 【輪読会】基礎から学ぶVue.js【渋谷】 Ch.5 「コンポーネントで UI 部品を作る」
2. 基礎から学ぶ Vue.js amazon: http://amzn.asia/d/gIfPDHo サポートサイト：https://cr-vue.mio3io.com/
3. コンポーネント
4. コンポーネントとは • コンポーネント -> 部品 • Vue.js では機能を持つUI部品をコンポーネントとする ◦ 以下の２つを一緒に管理する ▪ テンプレート ▪ JavaScript のロジック • 再利用をできるようにしておくと便利 ◦ 修正漏れが減る ◦ ex)リストの中のリストアイテムをコンポーネント化しておけばリストに修正があった時に修正箇所が 減る リスト リストアイテム リストアイテム リストアイテム リストアイテムの一つ を変更するだけで他 の部分にも適応され る リスト リストアイテム リストアイテム リストアイテム
5. コンポーネントの定義 • Vue.component を使うとグローバルに定義できて他からも利用できる ◦ グローバルに定義した例 • ローカルへの登録もすることができる ◦ ローカル登録の例 • コンポーネントのオプション ◦ 今までと同じように定義できる ▪ methods ▪ data • ただし data はオブジェクトを返す関数でなければいけない ▪ filter ▪ … ◦ 例 • ルート要素は単一でなければならない ◦ 例
6. コンポーネント間の通信
7. コンポーネント間の通信 • それぞれのコンポーネントはスコープが区切られている ◦ 意図せず他の機能に影響を与えないため • コンポーネント間でデータのやりとりをする方法は３つ ◦ 親子間でpropsとカスタムイベントを使ったやりとり ◦ イベントバスをつかう ◦ Vuexを使う ▪ これはCh8で。
8. 親子コンポーネント • コンポーネントで別のコンポーネントを使うと親子関係になる ◦ https://codepen.io/issei126/pen/oQdKoj • ルートコンポーネントを「親コンポーネント」ということもある
9. 親子間のデータフロー • 親から子 ◦ 属性で渡して、propsで受け取る • 子から親 ◦ カスタムイベントを使って送る 親 子 value=’hoge’ props: value $emit(‘eventName’, data) foo(data)
10. 親から子へのデータのわたし方 • 親は「属性」として渡す • 子は「props」で受け取る ◦ https://codepen.io/issei126/pen/jQKGoE
11. 子コンポーネントへの属性付与 • props として受け取る指定をしていない属性は親コンポーネントで指定したもので 上書きされる ◦ 複数していできるものはマージされる ◦ バグの元になりそうなので頭にいれておいたほうがいいかも ◦ https://codepen.io/issei126/pen/qQKVBp
12. コンポーネントのリストレンダリング • コンポーネントに対して v-for を使うことができる • https://codepen.io/issei126/pen/mQKqea
13. propsで受け取ったデータの書き換え • props で受け取ったデータは勝手に書き換えてはいけない ◦ 警告が出る例 • 子のコンポーネントの中で書き換えて使いたい場合 ◦ 算出プロパティを使う ◦ https://codepen.io/issei126/pen/rQKYJY • 親のデータを書き換えたい場合 ◦ $emit を使って親にイベントを伝える (後述 • 配列/オブジェクトをprops渡す時には注意 ◦ 参照渡しなので親も書き換わってしまう ▪ https://codepen.io/issei126/pen/gQKXdO ◦ とにかく子で書き換えるのはやめましょう
14. propsの受け取りデータ型の指定 • props に受け取りデータ型を指定するのが推奨されている • 指定したもの以外が渡されると警告が出る ◦ エラー原因の特定の助けになる ◦ https://codepen.io/issei126/pen/oQyoOO • データ型以外にもデフォルト値や必須項目などを指定できる ◦ https://codepen.io/issei126/pen/rQKpBK
15. 子から親 • 子から $emit を使いイベントを発火させる ◦ https://codepen.io/issei126/pen/gQKoLw • データを渡すこともできる ◦ https://codepen.io/issei126/pen/oQypwN
16. 親の持つデータの操作 • 子から emit でデータを渡す→親では渡されたデータを元にメソッド内で変更 • https://codepen.io/issei126/pen/bQKaYo
17. ネイティブイベントの発火 • onclick などのイベントを発火したいときは .native をつける ◦ つけないと emit で明示的に発火させないといけない ◦ https://codepen.io/issei126/pen/WYydJM
18. 非親子コンポーネント • 親子関係ではないコンポーネント間は props をつかってのデータ渡しができない • Vue インスタンスをイベントバスとして利用する ◦ データを保持するインスタンス • 複雑になケースではVuexを使うほうがいいかも • https://codepen.io/issei126/pen/mQjoRG
19. 子コンポーネントを参照する • 参照される側には ref 属性、参照する側では $refs でコンポーネントを参照できる • https://codepen.io/issei126/pen/dQjLMr
20. スロット
21. スロットを使ったコンポーネントのカスタマイズ • 「スロット」は親となるコンポーネント側から、子コンポーネントのテンプレートの一部 を差し込む機能 • 親から子のテンプレートを変更したりするためにつかう • https://codepen.io/issei126/pen/aQjxyQ
22. 名前付きスロット 名前をつけることで複数のスロットを使うことができる https://codepen.io/issei126/pen/eQjoKj
23. スコープつきスロット slot-scope を使うと子コンポーネントからデータを受け取ることができる https://codepen.io/issei126/pen/MzBdGM
24. 双方向データバインディング • 「props で渡す」「$emitでイベントとして親に渡す」ではなく双方向でバインドするこ とができる • v-model を使う ◦ https://codepen.io/issei126/pen/vQzMEv • 受け渡す値をカスタマイズすることもできる ◦ https://codepen.io/issei126/pen/RqYOjX
25. sync による双方向データバインディング • sync を使うことで一つのコンポーネントに複数の属性を同期させることができる • 他と同じ $emit でイベントを発火する必要がある • https://codepen.io/issei126/pen/wQEZxW
26. テンプレート定義
27. テンプレートの書き方 • template オプション ◦ 単一ファイルコンポーネントを使用しない場合に推奨されている • inline-template ◦ inline-template 属性があるとき内側にある時、それをテンプレートとして使う ◦ 推奨されていない • text/x-template + セレクタ ◦ 学習やコードのシェアには役立ちそうだけど、推奨されてない • 描画関数 ◦ HTMLベースのテンプレートはオブジェクト構造に分解され、 JSの関数にコンパイルされる ◦ これを描画関数という ◦ その描画関数を直接使う ◦ この本の詳細な説明はされていない https://codepen.io/issei126/pen/dQqEyb
28. 注意点 • コンポーネントの命名規則 ◦ 文字と文字はハイフンでつなぐ「ケバブケース」にする必要がある ◦ OK ▪ <my-component></my-component> ◦ NG ▪ <myComponent></myComponent> ▪ <my_component>/my_component> • HTMLの包含可能な要素のルール ◦ <table>, <select> などは内部に持てる要素が制限される ◦ 自前のコンポーネントを入れ込みたいときは is 属性をつける ◦ 公式ドキュメント ◦ あんまり参考にならない例ｗ ▪ https://codepen.io/issei126/pen/NELVOz
29. その他の機能やオプション
30. 関数型コンポーネント • 状態とインスタンスを持たないコンポーネントをつくることができる ◦ functional オプションをつける ◦ dataはもてないけど、propsはつかえる • メリット ◦ パフォーマンスがたかい ▪ ライフサイクルや監視が行われないため • 注意点 ◦ VueDevToolに表示されない • https://codepen.io/issei126/pen/rQZEKM
31. 動的コンポーネント is 属性を使うことで複数のコンポーネントを切り替えることができる https://codepen.io/issei126/pen/OaoeBq
32. mixin • 共通処理を登録するために使う • mixinとコンポーネントで定義が重複している場合 ◦ data などのオプション ▪ コンポーネントの定義が優先 ◦ created などのフック関数 ▪ ミックスインのフックからすべて呼び出される • https://codepen.io/issei126/pen/YROobO
33. keep-alive • 通常 v-if や動的コンポーネントなどの切り替えではインスタンスが破棄され、状態 が初期化してしまう • keep-alive を使うと非描画になっていても状態を維持できる • keep-alive で追加されるライフサイクルフック ◦ activated: keep-alive を適用したコンポーネントが活性化した時 ◦ deactivate: keep-alive を適用したコンポーネントが非活性化した時 • https://codepen.io/issei126/pen/MzqNKp