vue.js

Vue.js公式のコンポーネントのガイドを読んだメモ

Veu.js公式のcomponentのページ

を読んで学んだ事メモ

章タイトルに沿って

コンポーネントとは何ですか?

コンポーネントの使用

グローバルに登録する

Vue.component('my-component', {
// オプション
})

ローカル登録

componentsオプションに登録する

DOM テンプレート解析の注意事項

内部の要素に制限を持つ特定の要素(<ul>, <ol>, <table>, <select>)ではカスタムコンポーネントが無効になる
is属性を使う事で回避できる
* .vueコンポーネントやインラインテンプレートはその限りではない

data は関数でなければならない

コンポーネントの構成

データの受け渡し
親コンポーネント→子コンポーネント:プロパティ
子コンポーネント→親コンポーネント:イベント

プロパティ

プロパティによるデータの伝達

子コンポーネントはpropsオプションでプロパティを受け取る

キャメルケース vs ケバブケース

プロパティをキャメルケースで書ける、htmlからアクセスする場合はケバブケースで

動的なプロパティ

リテラル vs 動的

プロパティに:をつけ忘れると文字列扱いになるので注意

単方向データフロー

親のプロパティが変わると子に伝達する(反対はない)

プロパティ検証

propsは検証可能

プロパティではない属性

?

既存属性による置換/マージ

classとstyleは値がマージされる

カスタムイベント

カスタムイベントとの v-on の使用

v-onを使って親は子のイベントを購読する

ネイティブイベントとコンポーネントのバインディング

ネイティブイベント?

.sync 修飾子

双方向バインディングできる

カスタムイベントを使用したフォーム入力コンポーネント

v-modelをコンポーネントに渡す時

親子間以外の通信

?

スロットによるコンテンツ配信

<slot>?

コンパイルスコープ

親テンプレート内の全てのものは親のスコープでコンパイルされ、子テンプレート内の全てものは子のスコープでコンパイルされる

単一スロット

親でカスタムコンポーネント内に要素を記述できる。この要素はテンプレートの内に描画される
子コンポーネントの内の要素はホストしている要素が空の場合に表示される

名前付きスロット

名前なしのスロットはデフォルトスロットとして設定してされる

スコープ付きスロット

?

動的コンポーネント

<component v-bind:is=XXX>
でcomponentを動的に切り替えられる

keep-alive

切り替えられたcomponentの状態を保持したい場合

その他

再利用可能なコンポーネントの作成

v-bind
v-on
slot
を書いておけば利用法はわかるはず

子コンポーネントの参照

javascriptで直接componentを使用する場合はrefをつけておく

非同期コンポーネント

?

高度な非同期コンポーネント

???

コンポーネントの命名の慣習

ケバブかな?

再帰的なコンポーネント

nameオプションを付ければ、自身を再帰的に呼び出すことができる

コンポーネント間の循環参照

?

インラインテンプレート

テンプレートのスコープが分かりにくくなる

x-template

小さいアプリならいい

v-once を使用した安価な静的コンポーネント

静的コンテンツが大量にある場合はv-once