一般的なコンポーネントは、値VUEを渡します

I.は小道具を使用してデータを渡します

 

親コンポーネントで内息子を使用します

< テンプレート> 
 < DIV > 
  父组件：{{MNY}} 
  < SON1 ：MNY = "MNY" > </ SON1 > 
 </ DIV > 
</ テンプレート> 
< スクリプト> 
インポートSON1から" ./Son1 " 。
エクスポートデフォルト{ 
 コンポーネント：{ 
  SON1 
 }、
 データ（）{ 
  リターン{MNY：100 }。
 } 
}。
</ スクリプト>

 

親コンポーネントのプロパティを受け入れるためのサブアセンブリ

 

 

II。使用$ EMIT使用

親コンポーネントサブアセンブリトリガ方法は、コールバックは、親コンポーネントに修正されたコンテンツを介して送信されます。

< テンプレート> 
 < DIV > 
  父组件：{{MNY}} 
  < SON1 ：MNY = "MNY" @input = "変更" > </ SON1 > 
 </ DIV > 
</ テンプレート> 
< スクリプト> 
インポートSON1から" ./ SON1 " ; 
エクスポートデフォルト{ 
 メソッド：{ 
  変化（MNY）{ 
   この.mnyを入力= MNY。
  } 
 }、
 コンポーネント：{ 
  SON1 
 }、
 データ（）{ 
  リターン{MNY。100 }。
 } 
}。
</ スクリプト>

 

サブアセンブリは、自分自身をバインドする方法をトリガー

< テンプレート> 
 < DIV > 
  子组件1：{{MNY}} 
  < ボタン@click = "$ EMIT（ '入力'、200）" >更改</ ボタン> 
 </ DIV > 
</ テンプレート> 
< スクリプト> 
エクスポート既定{ 
 小道具：{ 
  MNY：{ 
   タイプ：Number 
  } 
 } 
}。
</ スクリプト>

 

>シンタ​​ックスシュガー文言 - ここでの主な目的は、データ同期の父となるコンポーネントです。

.sync＃
 < SON1 ：mny.sync = "MNY" > </ SON1 > 
<！ - イベント名の更新:(プロパティのバインディング.sync名前トリガー）- > 
< ボタン@click =「$ EMIT（ '更新：MNY」、200） " >変化</ ボタン> 

＃のV-MODEL 
< SON1 Vモデル=" MNY " > </ SON1 > 
< テンプレート> 
 < DIV > 
  のサブアセンブリ1：{{値}} //トリガイベントはINPUTある
  < ボタン@click = "$ EMIT（ 'INPUT'、200）" >変更</ ボタン> 
 </DIV > 
</ テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
 小道具：{ 
  値：{ // 受信した属性名のみを呼び出すことができる値の
   種類：ナンバー
  } 
 } 
}; 
</ スクリプト>

 

三。$親、子供$

転写性に続行

< Grandson1 ：値= "値" > </ Grandson1 > 
< テンプレート> 
 < DIV > 
  孙子：{{値}} 
  <！ - 调用父组件的入力事件- > 
  < ボタン@click 。= "$親$ EMIT （ '入力'、200）」>更改</ ボタン> 
 </ DIV > 
</ テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
 小道具：{ 
  値：{ 
   タイプ：Number 
  } 
 } 
}。
<

 

その後、$親の深いレベルがある場合。$親が.....我々は$の発送方法発送までをパッケージ化することができます

$＃ディスパッチ
Vue.prototypeディスパッチ$を。 = 関数$ディスパッチ（eventNameの、データ）{ 
  LET親 = この$親;.
   一方（親）{ 
    $親EMIT（eventNameの、データ）; 
    親 = 親$親;. 
  } 
}; 


それは同様に上方下方分配分散させることができるので、

＃$ブロードキャスト
Vue.prototypeブロードキャスト$。 = 関数$ブロードキャスト（eventNameの、データ）{ 
  放送CONST = 関数（）{
     この $ children.forEach（（子）=。 > { 
      子供$ EMIT（eventNameの、データ）;. 
      IF（。子供$子供）{
        $ broadcast.call（子、eventNameの、データ）; 
      } 
    }）。
  }。
  broadcast.call（この、eventNameのデータ）。
}。

 

四。$ attrsに、$リスナー

＃ $ ATTRS

バッチ受け継がプロパティ

< Son2の名前= "ジャック" 年齢= "10" > </ Son2 > 

<！ - あなたは$ ATTRS属性son2コンポーネントを使用することができますプロパティを受け継がし続けることができる- > 
< divの> 
  息子2：{{$ }} attrs.name 
  < Grandson2 Vバインドに= "$ ATTRS" > </ Grandson2 > 
</ DIV > 


< テンプレート> 
 < DIV >孫：{{}} $ ATTRS </ DIV > 
</ テンプレート>

＃ $リスナー

バッチ受け継が方法

< Son2の名= "ジャック" 年齢= "10" @click = "（）=> {} this.mny = 500" > </ Son2 > 
<！ - リスナーに使用できるプロパティアセンブリson2、方法は継続することができます伝承- > 
< Grandson2 Vバインドに= "$ attrsに" V-ON = "$リスナー" > </ Grandson2 > 

< ボタン@click = "$ listeners.click（）" >変更</ ボタン>

 

 

五.Provide＆注入します

#Provideは
データが親に注入

（）{提供
  リターン {parentMsg：「父」;} 
}、

#Injectは、
任意の親データサブアセンブリに注入することができる

注入する：[「parentMsg」] // データに搭載されます現在のインスタンスに

 

 

六.REF使用

取得コンポーネントインスタンス

<Grandson2バインドV = "$ attrsに" V-ON = REF = "grand2" "リスナーの$"> </ Grandson2> 
マウント（）{ // コンポーネントの属性が定義されて取得 
  にconsole.log（この。$ Refs.grand2を。名前）; 
}

 

 

七.EventBus

（複雑なプロジェクトは、このように使用することができるではない）のアセンブリのためのクロス通知

Vue.prototype $バス。 = 新新ヴュー（）; 

Son2コンポーネントが相互に通信し、Grandson1は

 （マウント）{ 
  この .. $ $ ON・バス（「私」、 =データ> { 
   にconsole.log（データ）; 
  }）; 
 }、

マウントされた（）{ 
  この $ nextTick（（。）=> {
    このバス$ $ EMIT（ "私"、 "I Grandson1。"。）; 
  } ）; 
 }