コンポーネントのVue
- コンポーネントの例としては、Vueの再利用可能です
- 接続 - コンポーネントで、小文字の名前を付け推奨しました
- データ、方法、計算：コンポーネント定義、テンプレートに加えて、他のオプションがあります
- コンポーネント定義データはメソッドでなければなりません
両方の方法は、コンポーネントを使用します
-
グローバル登録
< 私の成分> </ 私の成分>
Vue.component（ 'マイ・コンポーネント' 、{ テンプレート： '<DIV>アセンブリの内容</ div>' }）
-
ローカル登録
VARアプリ= 新しい新しいヴュー（{ EL： '#app' 、 コンポーネント：{ '' MY- コンポーネント：{ テンプレート： '<DIV>アセンブリの内容</ div>' } } }）
データを転送するために小道具を使って
方法の配列を使用して、小道具の側面
親コンポーネントは、サブアセンブリにデータを渡します
V-binの親コンポーネントのコンテンツは、動的にパスを拘束します
< 事業部は、上記ID言及=「アプリケーション」スタイル=「：;：; 200pxのボーダー2ピクセルソリッドスカイブルー高さ300ピクセル幅」> < お子様コンポーネントMSG =「私は親コンポーネントのコンテンツだ」> </ お子様コンポーネント> < HR > < ！ - V-動的STHを渡すために、サブアセンブリのバインド動的データ入力を結合- > < 入力タイプ= "テキスト" V-モデル= "dadmsg" > < バインド成分：STH = "dadmsg" > </ バインド・コンポーネント> </ DIV >
VaRのアプリ= 新しいヴュー（{ EL： '#app' 、 データ：{ dadmsg：ハッピー' }、 コンポーネント：{ '子成分' ：{ 小道具：[ 'MSG' ]、 テンプレート：「<DIV> {{ MSG}} </ div>」 } '結合成分' ：{ 小道具：[ 'STH' ]、 テンプレート：'<DIV> {{STH}} </ div>' } } }）
親コンポーネントからパラメータを受信するためのアセンブリで使用される小道具は、小道具の特性は、アセンブリに直接使用することができます。
単方向データフロー
概念の理解：データ伝送の小道具を介して一方向であり、データは、親サブアセンブリの構成要素の変動に伝達ではなく、その逆れます。
目的：サンズ成分溶液は、不注意サブアセンブリは親コンポーネントの状態を変更する変更を避けるために、発行されます。
シナリオ2つの修正小道具状況
- 親コンポーネントの初期値を送信する、サブアセンブリは、それらの範囲内で自由に変更することができる初期値として保存することができます。
- 渡されたデータを初期値として記憶され
- 登録コンポーネント
- データは親要素に渡され、サブアセンブリの小道具で受信します
- 初期値から渡されたデータが保存されました
< 事業部は、上記のIDを述べた=「アプリケーション」> < お子様コンポーネントMSG =「ハード、今日の仕事を持って、ああ」> </ お子様コンポーネント> </ DIV >
せアプリ= 新しいヴュー（{ EL： '#app' 、 コンポーネント：{ '子成分' ：{ 小道具：[ 'MSG' ]、 テンプレート： '<DIV> {{カウント}} </ div>' 、 データ（）{ リターン{ カウント：この.MSG } } } } }）
プロップ値は、特性を計算することによって再計算され、元の着信として変換される必要があります
- 登録コンポーネント
- 親要素データが渡された、と小道具を受信サブアセンブリに使用されます
- 渡されたデータは、プロパティを計算することによって、再計算して、ページをレンダリングしています
< DIV ID = "アプリケーション" > < 入力タイプ= "テキスト" Vモデル= "幅" > < 幅成分：幅= '幅' > </ 幅成分> </ DIV >
アプリ=せ新しいヴュー（{ ：EL "#app" 、 データ：{ 幅： 0 }、 コンポーネント：{ '幅成分' ：{ 小道具：[ '幅' ]、 テンプレート：「<DIV：スタイル= "スタイル「> </ div>」、 計算：{ スタイル（）{ リターン{ 幅：この .width + 'PX' 、 背景： '赤' 、 高さ： '30px' } } } } } }）
コンポーネントの名前
camelCase形式（キャメル）
kebabcase（ダッシュ名）
- HTML形式のアセンブリは、親コンポーネントサブアセンブリは、あなたが使用する必要があり、データを渡すという名前のダッシュ。 （A-BC√ABC×）
- 小道具では、ダッシュ名とこぶ命名をすることができます。
- テンプレートでは、あなたが使用する必要がありキャメルケース、ダッシュエラーを。
- データでは、使用this.xxxは、あなたが使用する必要がありますという名前のこぶを、エラーをダッシュ。
- 名前付きのコンポーネントは、名前ダッシュやこぶ命名をすることができます。
データの検証
小道具オブジェクトウェイの側
検証型：Number文字列ブール配列オブジェクト機能のカスタム
< DIV ID = "アプリケーション" > < スタイル成分：= 'A' ：B = 'B' ：C = 'C' D：= 'D' ：E = 'E' 、G = G '' > < / スタイルコンポーネント> </ DIV >
アプリせ= 新しい新しいヴュー（{ ：EL '#app' 、 データ：{ A： 1 、 B： 2 '' 、 C： ''、// 空の文字列を、それがtrueにデフォルトをとり 、[111、222：D 333 ]、 E：にconsole.log（）、 G： 3 }、 コンポーネント：{ 'styleComponent' ：{ 小道具：{ // デジタルタイプ A：{ タイプ：ナンバー、 必要：trueに //が通過する } // 文字文字列型 B：{ タイプ：[文字列、数値] } // ブール値 C：{ タイプ：ブール値、 デフォルト：trueに // デフォルト } // デフォルト値の関数であるように、アレイまたはオブジェクトが返される D：{ 型：Array、 デフォルト：関数は（）{ 戻り[] } } // 関数型 E：{ タイプ：関数 } // カスタム関数 G：{ バリ：関数（値）{ 戻り }値<10 } }、 テンプレート：'<DIV> {{A}} - {{B}} - {{C}} - {{D}} - {{G}} </ div>' } } } ）