-
スコープは、コンポーネント自体であります
-
テンプレートおよびテンプレートは、計算方法のプロパティとメソッドを計算する際に使用することができます
息子へ2.父は、データの小道具
-
親から、親からハードコードまたは動的データであってもよいし、V-バインドの値は、小道具を結合するために使用することができます
-
テンプレートおよびテンプレートは、計算方法のプロパティとメソッドを計算する際に使用することができます
-
文字列だけを通過させる転送番号、ブール値、配列、オブジェクト、サブアセンブリの親から直接成分、およびV-バインドを使用せず、もし
-
単方向データフロー
-
小道具を介してVUE 2.xのパスデータは、親コンポーネントは、サブコンポーネントに渡され、なくその逆（Vue1.xは、双方向バインディングサポートする.sync改質剤を提供）する場合、データが変化することを意味し、単方向であります
-
この設計、デカップリング成分として、父と息子の目的は、サブアセンブリが不注意回避するための理由は、状態の親コンポーネントを変更しました
-
-
企業は多くの場合、小道具を変更するために、2つのニーズの状況に遭遇します
-
1.親コンポーネントの初期値が渡され、それが初期値として保存され、その範囲の変更を使用して自由であり、サブアセンブリ
-
データ数で宣言されたコンポーネントは、コンポーネントの初期化の親コンポーネントからinitCountを取得し、それはあなたが直接操作を避けることができるようにだけ、カウント数を維持するために、彼らとは何の関係もありませんinitCount
-
-
2.prop値は、元の遷移として渡される必要があります
-
属性を計算する目的で処理することにより、
-
各時間を書き込むために、ベルトユニットの幅S（PX）が、あまりにも多くの問題を転送するために、一般的に単位なしの値を算出する、ことができるアセンブリ内の均一な特性を用いて計算されます
-
-
-
JavaScriptオブジェクトと配列の参照タイプが同じメモリ空間を指しており、それは物体と小道具のアレイであり、親コンポーネントに影響を与えることに注意するサブアセンブリに変更されます
-
ディープコピーデータを参照互いに父と息子の種類に影響を与える問題を解決します
-
ディープコピーがメモリからオブジェクトの完全なコピーです。だから、どんな方法で、周りの開いていない新しいメモリ空間を開かないでなければなりません。
-
-
データの検証
-
小道具は、オプションの配列することができますが、あなたが検証支えるために必要があるとき、私たちは、文言をターゲットにする必要があります
-
あなたは他の人が使用するためのコンポーネントを提供する必要がある場合は、データ検証のために推奨されます
-
3.親子送信は、$とサブアセンブリのトリガイベントは、イベントをリッスンする親コンポーネントに$で、発します
-
一般的な方法へのオブザーバーモード;は、dispatchEvent原則とは、addEventListener
-
特定の値でイベントを投げる：$ 2番目の引数が、親コンポーネントがこのイベントを聞くとき、私たちはスローされる値にアクセスすることができます（または$イベントによって値がイベントハンドラとして初めてとなる発しますパラメータの受け渡し）
-
Vモデルは、カスタムコンポーネントを作成するために使用することができる使用すると、入力を形成します
上司へのイベントの4.Vue.js 1.xのバージョン$派遣（）、分布、親（1つまたは複数の段階では）イベントのオプションVueのインスタンスで受信することができます
VaRの myComChild = { テンプレート： 'の<div> <ボタン@クリック= "はclickHandler"> </ボタン> </ div>のクリック' 、 データ（）{ リターン{ } }、 {：メソッド はclickHandler（）{ この。$派遣を（D 'イベント'、 'こんにちは' ）; } } }。 VAR MYCOM = { テンプレート： '<div>の<私の-COM-子> </私の-COM-子> </ DIV>' 、 データ（）{ リターン{ } }、 。$ ON（ 'イベント-D'、（データ）=> { // 何かをする にconsole.logを（+データ）」1' ; // 最初の発泡を受信した後に停止し 返す 真 ; //は真缶を返しますより高いレベルの親コンポーネントがイベントを受け取ることができるように、継続バブリング ;}） }、 {：成分 myComChild、 } }; VAR VM = 新しい新しいヴュー（{ EL： '#app' 、 データ（）{ リターン{ } }、 作成（）{ この。$ ON（ 'イベント-D'、（データ）=> { // 何かやる にconsole.log（ '2' + データ）。 }）; }、 コンポーネント：{ MYCOM、 }、 メソッド：{ }、 // イベント：{ // 'D-イベント'：関数（MSG）{ // はconsole.log（MSG）。 // } // } }）。
5.Vue.js 1.xのバージョン$配下のブロードキャストイベントに優れによってブロードキャスト（）;使用及び$ディスパッチ（）と同じ、しかし反対方向に
空Vueの中央イベントバス（バス）の一例として、6 - 仲介モデル
-
Vue.js 1.xのバージョン$派遣（）とイベントに基づいて放送$（）、より多くの脆弱ななり理解しにくいコンポーネントツリーを、ストリーミング、およびコンポーネント構造展開処理であるため、通信コンポーネント兄弟の問題を解決することはできません
-
他のコンポーネントは、バスからイベントを受信して、対応するイベントコールバックで彼らのビジネスロジックを完了する一方のバスコンポーネントにより、イベントを宣伝
-
この独創的な方法及び光量は、親子、兄弟、クロスレベル、およびVueの1.xの成分を含む、のいずれかの間で通信を実現し、Vueの2.xのを適用します
-
適用可能な深度がバスインスタンスを拡張することができる場合、それに公開されるデータ、方法、計算および他のオプションを追加
-
事業では、とき共同開発、しばしばなどなど、ユーザのログインニックネーム、性別、電子メール、だけでなく、ユーザー認証トークン、として、いくつかの一般的な情報を共有する必要があるため、特に有用です
-
ただ、バスの初期化時に直接使用することができる任意のコンポーネントを任意の時間を取得してみましょう、と単一ページ豊富なアプリケーション（SPA）中で非常に有用であろう
// ツリーアセンブリのVueの例のルートに登録eventHubは、これが使用すること。$ Root.eventHub。これ。$ Root.eventHubと$発する。$ ON // 非使用バスBUSアセンブリのイベント のvarバス= 新しい新しいヴュー（）; VARの COMA = { テンプレート： '<クリック= "はclickHandler" @ボタン> </ button>の中央イベントバスにイベントを渡す' 、 {：メソッド はclickHandler（）{ 。バス$ EMIT（ 'バス・イベント' 'アセンブリCOMAから' ）; } } }; 新しい新しいヴュー（{ EL： '#app' 、 データ（）{ リターン{ メッセージ： '' } }、 コンポーネント：{ 昏睡、 }、 {）（搭載 するvar _this = この; バス上の$（ 'バスイベント'、関数（MSG）{ にconsole.log（MSG）; _this.message = MSG; }） } }）。
-
7.父链これ。$親
-
サブアセンブリで、。$親親インスタンスこれを使用して直接またはコンポーネントにアクセスすることができ、コンポーネントの親は、このスルーそのサブコンポーネントの全てに。$子供のアクセスであってもよいし、ルート・インスタンスまで再帰無限アクセスアップまたはダウンすることができますまたは最も内側のコンポーネント
-
Vueのが、このような操作を許可するが、サービスでは、データはできるだけ多くのサブアセンブリに依存する親要素（コピー自体を）避けるべきであるが、親子密結合アセンブリとして、見えるように、そのデータを変更するためのイニシアチブを取るべきではありません親親コンポーネントは、それが任意のコンポーネントのように変更してもよい、アセンブリの状態を把握することは困難です
-
理想的には、唯一のコンポーネント自体がその状態を変更することができます
-
サンズ小道具によってアセンブリと$より良いEMITを伝えます
VaRの COMA = { テンプレート： 'の<div> <ボタン@ =クリック"はclickHandler">親データ要素を変更します。</ボタン> </ DIV>' 、 メソッド：{ はclickHandler（）{ // 何かを // 親へのアクセスをチェーンの後、あなたは、このようなコンポーネントのデータを直接変更親として、何もすることができ 、この「組立COM-Aからコンテンツ」$のparent.messageを=。; }、 } }; 新しい新しいヴュー（{ EL：「#app」、 データを（） { 戻り{ メッセージ： '' } }、 コンポーネント：{ COMA、 } }）。
8.サブアセンブリ指数
-
$ REFは充填コンポーネントのレンダリング後に作成され、それが非応答であり、それが唯一の直接のサブアセンブリにアクセスするための緊急プログラムとして、レフリー$テンプレートまたはコンピューティングの特性（非応答タイプ）では避けるべきですさ
<DIV ID = "アプリケーション"> <クリック= "はclickHandler" @ボタン>ゲットREFによって、サブアセンブリの例</ button>の <P REF = "P">こんにちは</ P> <COMA REF = "COMA"> </ A-COM> </ div> <SCRIPT SRC = "VUE-dev.js"> </ SCRIPT> <SCRIPT> // サブアセンブリのインデックス// この貫通多くのサブアセンブリ、。$子どもたちへ11私たちが必要とするコンポーネントのインスタンスを横断することは困難な作業です// 特にダイナミックなレンダリングコンポーネント、その配列は固定されていません// Vueが特別な属性REFとサブコンポーネントを指定するには、インデックスメソッドのサブコンポーネントを提供しています名前インデックスVARの COMA = { データ（）{ リターン{ メッセージ： 'データ・サブアセンブリ' } }、 テンプレート： 'この子コンポーネントの<div>の<span>が</スパン> </ div>' 、 }; 新しい新しいヴュー（{ EL： '#app' 、 データ（）{ リターン{ } }、 コンポーネント：{ COMA、 }、 方法：{ はclickHandler（）{ // の$によってアクセス具体例、参考文献 VARの MSG = この$ refs.comA.message; にconsole.log（MSG）; // ヴュー1.xから異なる、ヴュー2。 refに組み合わせたV-EL xとV-refは、Vueが自動的に行って、一般的なラベル・コンポーネントまたは決定します はconsole.log（これを。$ refs.comA）; // VueComponentがオブジェクト にconsole.log（この $のrefs.p）;. // DOM要素要素P } } }） </スクリプト>
9.slot
-
サブ特殊なコンポーネントを使用する
<slot>スロットを開くことができ、このサブコンポーネント（スロット）の要素、サブコンポーネントタグに挿入された親コンポーネントテンプレートは、のサブコンポーネントのすべての内容に置き換えられます<slot>親場合、ラベルとその内容を（成分の含有量は、サブアセンブリ、挿入されていない<slot>タグの内容がデフォルトとして表示されます。 -
シングルスロット
-
スロット名前付き; name属性使用してスロット特徴マッチングサブアセンブリを使用する親コンポーネント<スロット> ;親コンポーネントスロットはコンテンツ素子特性で使用されていないが、デフォルトのサブアセンブリのスロットのname属性を使用せずに表示されます
\ </ DIV> " 、 }; 新しいビュー（{ EL： '#app' データ（）{ 、 リターン{ } }、 コンポーネント：{ MYCOM、 } }）。 </ SCRIPT>
10.スコープスロット
-
スコープスロットは特別なスロットである、テンプレートの使用を置き換える要素をレンダリングされた再使用することができます
-
親コンポーネントの使用
<template>要素を、と持っているscope="props"機能を、ここだpropsだけの一時的な変数は次のように、v-for="item in items"内部itemに同じ。template一時的な変数によってpropsサブアセンブリのスロットからデータにアクセスします -
スコープスロットの使用シナリオでは、再使用スロットのサブアセンブリのどちらかであるが、またスロット矛盾
<DIV ID = "アプリケーション"> <私のコム> <テンプレートスコープ= "小道具"> <P>来自父组件的内容</ P> <P> {{props.msg}} </ P> </テンプレート> </私の-COM> </ div> <スクリプトSRC = "LIBS / VUE-dev.js"> </ SCRIPT> <SCRIPT> VAR MYCOM = { テンプレート： " の<divクラス= "コンテナ"> \ <スロットをMSG = "来自子组件的内容"> </スロット> \ </ div> " }。新しいヴュー（{ エル： '#app' 、 MYCOM、 } }） </スクリプト>