Djangoroidの奮闘記スマートフォン用の表示で見るDjangoroidの奮闘記python,django,angularJS1~三十路過ぎたプログラマーの奮闘記この広告は、90日以上更新していないブログに表示しています。//オプション})一度登録すると、カスタム要素<my-component>を使えるようになる。親のinstanceのtemplate内で使えるようになる。}})今のところ、グローバル登録との違いがわからない。elementが読み込まれない時がある。Vue({}))に渡すことのできるほとんどのオプションは、コンポーネントの中で利用できる。dataだけは関数でなければならない。同じオブジェクトの参照を返します。プロパティを経由して、データを子に伝え、子はイベントを経由して、親にメッセージを送ります。この場合は、messageという変数を通じて、親からデータを受け取る。}}</span>'})上記のように設定しておくと、以下のように、親のcomponent内で、messageという変数を通じて、valueを受け取ることができる。ケバブケースhtmlの属性は、大文字と小文字を区別しない。文字列と、数字を間違えないように注意。v-bind:some-prop="1"></comp>単方向データフローすべてのプロパティは、親->子のみ。逆は無し!ただし、プロパティは初期値を渡すためにのみ使われ、子コンポーネントは単にその値をローカルデータプロパティとして使用したい場合と、プロパティは変換が必要な生の値として渡されます。場合は、プロパティを変更したくなる。プロパティの初期値をその初期値とするようなローカルデータプロパティを定義します。以下のようにvalidationできる。}})typeの種類は以下の通り。チェックで作成できるでしょう。意味はよくわかってない。コンストラクタ関数の型(?)と一致しているかどうかをチェックできるということだろう。イベントが起こったときに、子→親に通信する方法。以下の3つを利用できる。$on(eventName)を使用してイベントを購読します。$emit(eventName)を使用して自身にイベントをトリガーします。incrementが起動すると、$emit('increment')により、親方向に、incrementのevent通知が伝えられる。}})上記のコードでは、子->親へイベント通知をしているだけで、データの受け渡しなどはされていない。要素でのネイティブイベントを購読したいときがあるかもしれません。修飾子を使用することができます。例は以下の通りらしい。修飾子.syncは双方向データバインディングができるんやな。中核になりそうな機能の1つやな。-->お〜〜〜、これはめっちゃ便利そうだし、使い所多そうだな。上記のコードで、子コンポーネントが、fooの値を更新するために、プロパティの変更の代わりに、明示的にイベントを発信する必要がある。fooがupdateされました!という情報を親コンポーネントに伝える!カスタムイベントを使用したフォーム入力コンポーネントカスタムイベントは、v-modelとともに、動くカスタムフォーム入力を作成されるためにも利用される。-->コンポーネントと一緒に使用すると、簡単になる。}"></custom-input>つまり、v-modelと一緒に、componentを動かすには以下が必要。プロパティを受け入れる新しい値とともに、inputイベントを発信する通過入力を例は以下の通り。inputの値の整形と値に対する制約が行われr。カスタマイズv-modelをカスタマイズする。これはdjangoのget_contextなどを上書きするのに似てるな。デフォルトだと、v-modelは、valueをプロパティとして、inputをイベントとして利用する。チェックボックス、ラジオボタンなどの入力タイプを利用する場合は、valueプロパティをその他の目的で利用することができる。複数のコンポーネントを使用するときの注意事項。appは独自のtemplateをもっており、app-headerなどもそれぞれ独自のtemplateをもっている。そのため、appがどのコンテンツにどのように作用するかがわかりづらい構造になっている。<app-footer></app-footer></app>親コンポーネントのコンテンツと、コンポーネント自身のテンプレートをうまく織り交ぜる方法が必要。これは、コンテンツ配信と呼ばれるプロセスらしい。Vue.jsでは、要素を利用して、配信APIを実装するらしい。コンパイルスコープ以下の例では、messageは、親コンポーネントに依存する。v-show="someChildProperty"></child-component>上記の例をchild-componentで機能させたい場合は、以下のように、子component内のtemplateに記載する。}})同様に、配信コンテンツは、親スコープでコンパイルされる。配信コンテンツというのは、レンダリングされた後の、templateのことかな。</slot></div>コンポーネントを使用した親は以下の通り。</my-component></div>描画された結果は以下の通り。タグの部分は削除されてる。</div></div>結論的には、子コンポーネントのelement内に、何も値が無い場合は、は破棄されない。何かある場合は、slotは破棄されて表示されない。持ち、コンテンツを配信する方法をカスタマイズするために使用できます。以下のようなtemplateをもつコンポーネントがあると仮定する。</footer></div>親のマークアップは以下の通り。info</p></app-layout>描画された結果は以下の通り。</footer></div>slotに名前をつけると属性ごとに、slotの活用方法をカスタマイズできる。child"></slot></div>親のtemplate。tag内の、scopeを使って、propsに、子コンポーネントのslot内で設定したtextを渡す。</child></div>出力は以下の通り。</div></div>より一般的なユースケースは、リストコンポーネント。</slot></ul>親のtemplateは以下の通り。</template></my-awesome-list>フォールバックコンテンツってのは要するに、親コンポーネントに何も要素がなかったときに、表示されるコンテンツのことらしい。検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!riikkuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。