VUEの通信コンポーネント

通信の構成要素の14種類

1.小道具

  このプロパティは、息子に父である、小道具値は配列やオブジェクトにすることができます

// 配列:推奨されない
小道具:[] 

// オブジェクト
{:小道具
 inpVal:{ 
  タイプ:ナンバー、// タイプ定義された入力値
   // タイプ値はできる文字列、数値、ブール、配列、オブジェクト、日付、機能、記号
   // 型コンストラクタは、カスタムすることができ、instanceofは確認応答で確認することが 
  必要:trueに// 送信がするかどうか
  デフォルト200があり// デフォルト値、または関数のデフォルト値からのオブジェクトの配列は、工場でなければなりませんデフォルトとして取得します。()=> [] 
  バリデータ:(値){
     // この値は、次の文字列を一致させる必要があり
    、戻り [ 成功警告"危険" ] .indexOf(値)==! - 1 
  } 
 } 
}

2. $を発します

  これはまた、非常に一般的ですが、父親から息子の方法に、実際には、親コンポーネントのカスタムイベントをトリガ

1  // 親コンポーネント
2 <ホーム@タイトル= "タイトル">
 3。 // サブアセンブリ
4。 この $ EMIT( 'タイトル'、[{タイトル: 'これはタイトルです'}])。

3. vuex

  vuexは状態マネージャです、

  内部の複数のデータ項目を共有するための別のプラグイン、単純な通信場合、それはより頻繁に使用することになるので

1  状態:.データウェアハウスに格納された定義は、$ STORE.STATE又はmapStateこれによってアクセスすることができる
 2つの ゲッター:値ストアを取得し、属性ストアを計算するために考慮することができる、又はこの$のstore.getterによって得ることができるMapGettersアクセス
 4。 突然変異:それは変異が直接変化ストア値であるので、同期させるように設計された理由を同期変化ストア値、
 5           。それはmapMutations呼び出しによって変化を追跡することができない非同期である場合VUE操作は、記録される
 6非同期呼び出し機能突然変異を行い、それによってストアを変更:アクション値が、この。$ mapActions派遣やアクセス
 8つの。モジュール:モジュール、状態があまりにも、モジュールに分割し、最終的に入口を通って導入することができるならば...解体

 

4. $ ATTRSと$リスナー

   2つの新しいプロパティが一般的ではありませんが、高度な使用法は非常に一般的である2.4.0。 

  $ ATTRSシナリオ:息子に父は価値の多くを持っている場合は、サブアセンブリを複数定義する必要があります

  解決する小道具:ATTRSは、小道具の値は、親、子伝送(唯一の小道具は、プロパティが登録されていないされるに$ attrsに)で定義されていない取得 - >(クラスやスタイルを除きます)

1  // 親コンポーネント
2 <ホームタイトル= imgUrlため= "80" =幅"80"高さ"これはタイトルが" = / "imgUrlため">
 3  
。4  // サブアセンブリ
。5  マウント(){
 6    はconsole.log(。 )$ ATTRS // {タイトル: "80"、高さ: "80"、imgUrl用:幅"このタイトルは" "でimgUrl"} 
。7 }、

 

    

1つの 小道具:{
 2    幅:{               //親要素の幅登録サブアセンブリの小道具後、次に$上ATTRSに失敗
 3。     タイプ:文字列、
 4。     デフォルト: ''
 。5    }
 6。 }、
 7。 ){(マウント
 図8    にconsole.log(この $ ATTRS。)// {タイトル: "このタイトルは"、高さ: "80"、imgUrl用: "のimgUrl"} 
。9 }、

 

    

$ リスナーシーンで:副成分は、溶液の親コンポーネントを呼び出す必要がある内部コンポーネントのメソッド親コンポーネントは、Vオン=「リスナー」を通過することができる-----非常に有用な成分のより高いレベルを作成する場合: 

1  // 親コンポーネント
2 <ホーム変更@ = "変更" />
 。3  
。4  // サブアセンブリ
。5  マウント(){
 6    はconsole.log(これは。リスナーの$)// 変更イベントを取得する
7 }

 

$ inheritAttrs 

コンポーネント内のプロパティは、通常のHTML要素の属性として表示される登録されていません

1  // 親コンポーネント
2 <ホームタイトル= imgUrlため= "80" =幅"80"高さ"これはタイトルが" = / "imgUrlため">
 3  
。4  // サブアセンブリ
。5  マウント(){
 6    はconsole.log(。 ATTRS $)// {タイトル: "このタイトルは"幅: "80"、高さ:imgUrlは"80"、 "imgUrlため"} 
。7  }、
 8。 
9。 inheritAttrsデフォルト値をtrueに、すなわち、親コンポーネントの特性にルートコンポーネントに表示されます
 10に設定した場合はfalse非表示になります

 

5.和注入提供

    新しいの2.2.0バージョン

  使用シナリオ:どんなに深いコンポーネントレベル、すべての将来の世代への依存コンポーネントを祖先の注入を許可していない、と下流上流との間の関係の確立は、常に有効にする時間であることからします。

   提供:オブジェクトまたはオブジェクト関数のリターンを

   注入:文字列配列、またはオブジェクトを、キーオブジェクトは、バインディングローカル名であります

1 <テンプレート> //親要素
 2      <DIV ID = "アプリケーション">
 3      </ div>
 4 </テンプレート>
 5      <スクリプト>
 。6          エクスポートデフォルト{
 7つの             データ(){
 8                      リターン{
 9。                         DATAS:[
 10                              {
 11。                                  ID :. 1 12である                                  '製品':ラベル
 13                              }
 14                              {
 15                                 ID :. 1 16                                  ラベル: '製品2'
 。17                              }、
 18である                             {
 19。                                  ID :. 1 20は                                  ラベル: '3つの製品'
 21である                             }
 22である                         ]
 23である                     }
 24              }
 25              {提供
 26が                 リターン{
 27                      DATAS:これは.datas
 28                  }
29              }
 30          }
 31      </ SCRIPT>

 

 

<テンプレート>     // 后代组件 
    の<div> 
        <UL> 
        <LIのV-  "DATASで(項目、インデックス)" =:キー= "インデックス"> 
            {{item.label}}
         </ LI> 
        </ UL> 
    </ div> 
</テンプレート> 
    <スクリプト> 
        エクスポートデフォルト{ 
            注入:[ 'DATAS' ] 
        }
     </ SCRIPT>

 注意:提供し、バインディングは対応できません注入します。これは意図的です。あなたはリスナーオブジェクトを渡す場合は、そのオブジェクトまたはそのプロパティが対応することができます。

 応答例:

提供親コンポーネントは
  (提供){ 
    リターン{ 
      map_nodeObj:{map_node:この.OBJ}
       // ヒント提供し、結合反応を注入することができません。これは意図的です。あなたが監視できるオブジェクトを渡す場合は、そのオブジェクトまたはそのプロパティが対応することができます。
    } 
  }、

サブアセンブリは導入
  を注入し:{ 
    map_nodeObj:{ 
      デフォルト:()=> {
         リターン {map_node: '0' } 
      } 
    } 
  }、
使用:この.map_nodeObj.map_node 

// 実行シーケンス
データを
提供
作成   // これで$ ELフェーズは、この最初のprivideの処理ロジック、生成されていない、コンポーネントの子は、値が注入だけ取ることができ
マウント
...

 

6. $親和の$の子どもたち

    $親:親コンポーネントを参照するには、コンポーネントのコレクションを返します。 

  使い方:.この$親(現在のコンポーネントが親コンポーネントを持っていない場合は、現在のコンポーネントに戻ります)

  $子供:世代は、サブアセンブリを意味コンポーネントのコレクションを返します。

  使い方:.この$子供(あなたはサブアセンブリの順序が添字を表すために使用することができます明確に知ることができる場合)

注意:(1)コンポーネントは、唯一のルートを持つことができます

   (2)。$親サブアセンブリで使用することができる。値、または関数属性

   (3)親コンポーネント内でこれを使用することができる。$子供[i]があります。宿泊施設

   (4)はこの点に注意してください

7. refと$レフリー

  3用法refがあります。

  (1)refはこれを取得した共通の要素に適用される。$ Refs.nameのDOM要素であります

  (2)refは、このコンポーネントのインスタンスによって取得された$ Refs.name ,.サブアセンブリに適用され、すべてのメソッドを使用すること

  refとV-用ケース一緒に

        

                             

 

8. $ルート

  $ルートグローバルプロパティ

アプリは聞かせて= 新しい新しいヴュー({ 
    :EL「#app」// グローバルデータ、または変更することができる他のページの生成 
    データ:機能(){
     戻り値{ 
        S:「」
    } 
    }、
    ルーター、
    店、
    テンプレート:「<ルータ-view> </ルータービュー> ' 
})

// a.vue 
    これ。root.s = $' '設定の属性// b.vue 
    はconsole.log(これ。$ root.s)   // セットsのプロパティ

 

 

9. .sync

  シンタックスシュガーの.syncとして、再導入から2.3.0 .sync修飾子は、コンパイル時には、自動的にV-上のリスナー親コンポーネントの属性を更新するように拡張されています

// 親要素 
<CoMPの:foo.sync = "バー"> </ CoMPの> // 時間をコンパイルするように拡張されます: 
<CoMPの:FOO = "bar"の@Update:FOO = "ヴァル=>バー=ヴァル"> </ CoMPの> // サブアセンブリ// 明示的に更新イベントトリガーする必要がfooの値を更新するのに必要なサブアセンブリ、:
//をので、トリガサブアセンブリを更新するが、方法によって変化させることができる$発するこの $ EMIT(「更新を。 :foo」で、newValueに)







 

 

10. Vスロットソケット

  2.6.0新

  (1)匿名スロット

  (2)という名前のスロット

  (3)スコープスロット

    

 

おすすめ

転載: www.cnblogs.com/shenjilin/p/11649867.html