上尾市のWEBプログラマーによるブログJavaScriptをメインにプログラミング関連書籍のまとめ・感想を書いています。Vue()とコンポーネントの違いグローバル登録とローカル登録グローバル登録ローカル登録プロパティ(Props)キャメルケースで定義し、ケバブケースで属性として指定する。属性値としてxxx="yyy"と指定した場合は、全て文字列として扱われる。プロパティの値は変更してはいけない。Vue()とコンポーネントの違いdataオプションはコンストラクタの場合はオブジェクトだが、コンポーネントの場合はオブジェクトを返す関数でなければならない。'<p>ローカル登録されたコンポーネントです。},})</script>プロパティ(Props)キャメルケースで定義し、ケバブケースで属性として指定する。定義し、以下で呼び出し。test-text="これはプロパティです。"></my-hello>属性値としてxxx="yyy"と指定した場合は、全て文字列として扱われる。xxx="1"もpropsとしては文字列となる。数値として渡したい場合はv-bind:xxx="1"のようにv-bindを使う。使うことは滅多にないと思うが、v-bindで文字列リテラルを渡す場合はシングルクォートを使ってv-bind:xxx="'hoge'"とする必要がある。プロパティの値は変更してはいけない。プロパティの値は親コンポーネントで任意のタイミングで変更される可能性があるため、受け取ったプロパティの値を変更してはいけない。変更が必要な場合は、プロパティの値をdataの初期値とする。'グローバル登録されたコンポーネントです。定義し以下で呼び出し。Stringだが、requiredまたはdefaultも指定する場合はオブジェクトとする。"hoge",},defaultが配列またはオブジェクトの場合は規定値を返却する関数とする。}},-->$emitメソッド子⇒親の伝達には$emitでカスタムメソッドを発生させる。親コンポーネントでは、子コンポーネントから$emitメソッドで通知されたイベントしか検知することができない。v-on:click="handleMyHelloClick"><my-hello>clickなどのブラウザネイティブなイベントを受け取りたい場合は、v-onに.native修飾子を付与する。v-on:click.native="handleMyHelloClick"><my-hello>.native修飾子はコンポーネントの構造に影響されやすいため、乱用するべきではない。focusイベントが検知できない。(focusイベントは上位要素に伝播しないため)このように、.native修飾子は特定の条件で簡単に動作しなくなる。スロットスロット呼び出し時にタグボディに指定した文字列を、コンポーネントのテンプレートに差し込むことができる。した場合、親コンポーネントのnameが参照される。子コンポーネントのdetaオブジェクトにアクセスすることはできない名前付きスロット複数のスロットを埋め込む場合は名前付きスロットを利用する。v-slot:header><strong>スロットにより差し込まれたヘッダーです。v-slot:footer><strong>スロットにより差し込まれたフッターです。</strong></template></my-hello>使い方slot要素にname属性を指定(付けない場合はname=”default”とみなされる)して定義する。name="xxx">初期値</slot>template要素のv-slotディレクティブで呼び出し。.js2.6以降では非推奨)以下、あまり使うことはないと思うが。v-slot:[name]のように埋め込み先を動的にすることができる。v-slot:xxxの省略記法は#xxxである。スコープ付きスロットスロットを使って子コンポーネントの情報を取得することができる。v-bind:xxx="yyy">初期値</slot>template要素のv-slotディレクティブでスロットプロパティを受け取る。</template>※オブジェクトを渡す場合、呼び出し時に分割代入を使うと簡略化できる。defaultスロットしかない場合、呼び出し時のv-slotディレクティブは<template>ではなくコンポーンネント要素に書くことができる。3を扱っているのはよいが、かなり薄い内容だった。それでも最低限の機能を使うだけであれば、参考にはなると思う。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントに返信があったらメールで通知する。r.children[i]}}}}}()。